css代码语法
p{color:blue;}
css代码注释
/*这里是css代码注释*/
css样式分类
内联样式(行内样式)
嵌入样式
外部样式
css选择器
通用选择器
*
p *(选择所有p包含的元素)
上下文选择器
后代选择器 div span
子元素选择器 div>span
相邻元素选择器 p+span
兄弟元素选择器 p~span
id和类选择器
#idName
.className
属性选择器
p[name](所有带有name属性的p元素)
p[name="page"](所有带有name属性且name为page的p元素)
伪类和伪元素
伪类(一个冒号):
UI伪类:
LVHA
focus(获取焦点时触发)
target(B的href是#A,当点击B,跳转到A时,触发A:target)
结构化伪类:
first-child
last-child
nth-child(n)
伪元素(一个冒号/两个冒号):first-letter、first-line、before、after
css3之前伪元素也是使用一个冒号,css3中伪元素使用两个冒号,并且新增了一个伪元素selected。
选择器优先级
优先级:靠近原则,内联>嵌入>外部(但需要考虑特指度)
!important >内联样式> id > class > tag
继承
css中可继承的样式大多跟文本有关:文本的字体、大小和颜色。
css中不可继承的样式:涉及盒子定位和显示的方式。
单位和值
文本值
border-style:solid dashed inset
数字值
字体大小:px em rem
font-size的基准大小是16px
px:像素大小
em:相对于最近的设置了字体大小的祖先元素
rem:始终相对于body字体大小
颜色值
①颜色名
②16进制颜色
③rgb颜色
rgb(r,g,b)或rgb(R%,G%,B%)
④HSL
HSL(色相,饱和度%,亮度%)