- 使用div比使用table,浏览器的加载速度更快,利于搜索引擎的优化。
- 不要使用@import方式导入CSS样式表文件,因为在网速较慢时,页面的样式可能会出现混乱。推荐使用<link rel="stylesheet" type="text/css" href=""/>方式。
- CSS继承性依赖于HTML中元素的父-子级关系。board, margin, padding, background等属性是不会被继承的,否则会导致样式的混乱。
- CSS样式匹配优先级遵循:带有!important的CSS样式声明的优先级最高;内嵌样式次之;最后按照样式表中的声明顺序(id选择器优先级最高,class选择器次之,HTML标签优先级最低)。如果没有设置样式,则自动继承父级节点的样式。
- td[name="red"]{color:red}表示将td标签中name属性的值为red的目标元素的字体颜色设置为红色。
- 通过z-index属性来设置图片的层叠效果,z-index的值越大的元素,越靠近上层。
- 不同元素的class的值可以相同,但不同元素的id的值必须不同,id的值具有唯一性。
- 超链接元素a的伪类选择符有:link, visited, active, hover。出现的顺序必须为link, visited, hover, active。a:hover{background-color:red;cursor:pointer;}表示当鼠标移到a元素上时,将改变a元素的背景色和鼠标指针的样式,鼠标移下来则恢复原来的样式。
- table td, div.sub a, ul>li{font-size:14px;}表示将下面三个元素的字体设置为14px,三个元素分别为:
table元素里面的td元素;
class的值为sub的div元素里面的a元素;
ul元素的直接子元素li。
注意:若li为ul的祖孙元素,而非直接子元素,则不能写成ul>li,应该写成ul li,可以看出后者的通用性更强。 - p#sub和p #sub的区别:
p#sub表示id的值为sub的p标签;
p #sub表示p标签里面id的值为sub的元素。 - input:focus{background-color:red;}表示当input元素成为焦点时,该元素的背景色变为红色,失去焦点时恢复原来的样式。
- h1:before{content:"<";}
h1:after{content:">";}
上面两句表示在标签h1的前面加上<,在标签h1的后面加上>。
注意:伪元素:before和:after都需要和content属性一起使用。 - letter-spacing属性用于设定字符间距;
word-spacing属性用于设定单词间距;
line-height属性用于设定行高。
CSS学习笔记
最新推荐文章于 2022-04-10 19:22:29 发布