2019独角兽企业重金招聘Python工程师标准>>>
CSS:层叠样式表,用于html文档的呈现
一、定义和应用样式
background-color(属性):grey(值); color:white
关于css的属性请参考:http://www.w3school.com.cn/cssref/index.asp
内嵌样式:
Visit the Apress website
文档内嵌样式:
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
顺便讲一下padding 和margin的区别:
用盒子模型说明一下:假设盒子是一个div,盒子的内壁是border,盒子里放的是硬盘,硬盘与边框之间的距离叫做padding ,盒子与盒子之间的距离叫margin.
比如设一个div的padding属性,它的子标签元素会相应移动。而设置它的margin属性,这个div整个标签会依据兄弟元素或父元素移动.
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
外部样式使用:
import:样式表中导入其它样式
charset:样式表中的字符编码。不申明依赖文档编码。
二、样式的层叠和继承
样式来源:除上面讲的三种还有两种:浏览器样式和用户样式
浏览器样式:用户没有设置样式时,浏览器自动加在元素身上的样式
Visit the Apress website
I like apples and oranges.
Visit the W3C website
用户样式:允许用户自定义自已的样式表custom.css.特殊功能
什么是层叠?
优先级:
内嵌--文档--外部样式--用户样式--浏览器样式
import用打乱这种顺序,但是用户样式表中的import能干过他。
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
什么是继承?
如果找不到就会云父元素找。
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
不是所有的css属性都可以继承,与无素外观相关的会被继续,其它的不会
inherit:强型继承
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
三、CSS中的颜色
表示方式:名称,十六进制,rgb函数
详细参考:http://www.w3school.com.cn/cssref/css_colors.asp
四、CSS中的长度
绝对长对:in,cm,mm,pt,pc
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
相对长度:
em:与字号挂勾
Example
Visit the Apress website
I like apples and oranges.
I also like mangos and cherries.
Visit the W3C website
ex:相对于字符“x”的高度,一般为字体高度的一半
rem:与根元素字号挂勾
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
px :
像素为显示设备上可寻址的最小单元---图像的基本元素
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website
%
Example
Visit the Apress website
I like apples and oranges.
Visit the W3C website