CSS颜色相关总结

lieeps 发布于2019-08-30 15:44 / 765人阅读

原文地址：CSS颜色相关总结

Introduction

总结CSS中颜色的使用方法，达到需要的效果。

Requirement

Copy your pex3.html file (from your previous practice exercise) into a file named pex4.html. Alternatively, your pex4.html file may be a revised /improved version of pex3.html, and/or also you could also add/eliminate content. You should keep in your file at least one image with figure caption and at least one table (with the contents as before).

You should style this file with CSS, by creating an external CSS file (name it stylePex4.css), and then linking the CSS file from the HTML file. (Place the style file in the same folder as the html file; the linking from the HTML file should be RELATIVE.) Include comments in both of your files, at the top of the file, indicating the name of the other file (thus indicating the connection between these two files), your name and date.

Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that the styling effects are visible in:

Several or all instances of the same element in the whole document (for example, several paragraphs)

To make this styling visible you may use different colors for text or for background, you may style borders in different ways and/or style text in different sizes or other visible font variations.

Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that you use a different kind of selector than the previous item, and the styling effects are visible in:

One unique element

Include at least one CSS rule (and corresponding HTML elements and/or attributes as needed in the HTML file) , so that you use a different kind of selector than the previous two items, the selector is some kind of descendant selector, and the styling effect is visible in one or more html elements

Subdivide your HTML contents in at least three different areas . The areas may coincide with sections but not necessarily. You may use the

element as well. Provide a different background to each area.

One of the three different backgrounds (as described in the previous item) should include an image. The image should be placed in the images subfolder and LINKED RELATIVELY from the css file. Take into account the various examples provided in the W3Schools Background property tutorials.

NOTE: Make sure that the looks of your page is minimally reasonable. For example, images that are in figures (which you should have in your html file as required at the top of this exercise) should not conflict/overlap with images in the background. The background should be such that the contents are easy to read. You may also incorporate margins, but margins are NOT required for this practice exercise.

Create a section (consider the element

) titled with a heading "Here we play with fonts" (or something to that avail). In that section, include at least three paragraphs. Each paragraph should have different font styling. Change several font properties. (Check W3 schools for fonts)

Create a section titled "Numeric systems and Color Codes". In this section include the following list (and the table (or list) described in the next item)

The first list will include the following two equalities:

1010010110110 (2 = ? (16

7CDAF5(16 = ?(2

NOTE: You need to do the conversion by calculating the mysterious numbers in the bases indicated, and display the correct value. Subscripts should be rendered in the webpage as such.

Next (in the same section "Numeric systems and Color Codes"), include a table/list with three (3) color names, with the corresponding code in hexadecimal, in binary, and as rgb. You should color each element in the list with that color. The following is an example, but you should use OTHER COLORS

Red FF 00 00 1111 1111 0000 0000 0000 0000 rgb(255,0,0)

Dark Green 00 64 00 0000 0000 0110 0100 0000 0000 rgb(0,100,0)

BlueViolet 8A 2B E2 1000 1010 0010 1011 1110 0010 rgb(138,43,226)

Choose one of the colors from the list in the previous item and define a new color by adding or reducing some amount of red. Include a new row/item in the table/list with this new color, and name it with the original color name and then +red (or -red depending on whether you added or reduced red). The following is an example, you should create another color:

Dark Green + red EE 64 00 1110 1110 0110 0100 0000 0000 rgb(238,100,0)

In a footer include your information, including your name with a copyright symbol, and the reference to the sources of all pictures you use in your page. NOTE: Incorporate pictures that are free to use or your own pictures; you do not have to pay to use pictures for this course.

Validate both your HTML and your CSS files. Clear both errors and warnings.

Upload to the Server AND Submit URL"s in Canvas

You will need to upload several files into the server: the HTML, CSS and any pictures that you use. Upload images in the images subfolder.

Similarly to the previous practice exercises, you should provide, in Canvas, the URL to access, in this case, only one file: pex4.html. The other files are linked from the pex4.html file, therefore you should not include URL"s to access them in Canvas.

(本文出自csprojectedu.com，转载请注明出处)

混合云私有云 css颜色颜色css css颜色代码年终总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116315.html

优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
css3文字颜色动态渐变

摘要：是因为动画的结束后的最后一帧的颜色为，立马会重新执行动画，颜色会初始到第一帧，所以会有明显的变化。的效果就是背景颜色被剪裁到文字上面，只有文字会显示背景颜色。用数字表达结合以上三个属性结合动画，最终实现文字渐变的效果。浏览 Animate.css官网的时候发现Animate.css这几个字母的颜色会慢慢变化，个人觉得还是很有意思，本以为是利用animate 改变color,结果F1...

Cciradih 2019-08-29 13:56 评论0 收藏0
CSS background系列属性

摘要：通过该属性可以控制绘制的区域。背景图片相关的属性背景图片本身是有自身尺寸的，被应用元素也有自己的尺寸。通过属性可以修改原点位置。坐标系的反方向都是重复方式绘制。该位置是相对于原点构建的坐标系，默认情况下该位置就是在原点。一、元素背景是指哪些区域默认情况下元素的背景是指元素border（包含border）以内的区域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 评论0 收藏0
CSS 设计指南学习笔记二

摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...

printempw 2019-08-30 12:47 评论0 收藏0
[实践总结]纯css实现动态边框

摘要：另外一种实现思路是添加四个来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。背景这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： showImg(https://user-gold-cdn.xitu.io/2019/5/15/16aba8a2ccb58e4e);动态边框思路看到这个效果，我首先想...

BlackHole1 2019-05-23 16:28 评论0 收藏0