css基本属性
1. css(又称层叠样式表,用来表现HTML的一种计算机语言)
2. css声明:
{
/* 注释 */
css声明1;
css声明2;
属性名:属性值;
color:red;
color:#ffffff;
color:rgb(255,255,255)
color:rgba(0,0,0,0.5)
}
3. 如何在html中应用css
1) style属性(直接在元素中使用)
2) 内嵌 head> style (在html中使用style标签内嵌)
3) 外部引用(从外部引用css文件)
<link rel="stylesheet" href="">
4. 选择器
1) 基本选择器
1. 元素 div p
2. id #idname
3. class .classname
4. 组合 selector1,selector2
5. 并且 p.one
6. 普遍 * 一般与其他选择器配合使用 (以下表示ul标签下的所有子元素)
ul > *
2) 层次选择器【多个选择器共同作用结果】
1. 后代 (空格)
ul li
2. 子代(>)
ul > li
3. 下一个兄弟(+)
#second + *
4. 只有所有兄弟(~)
#second ~ *
3) 过滤器
1. 属性过滤器
selector[过滤条件]
1) 属性名
form > input[name]
input中包含name属性的元素
2) 属性值
form > input[name=val]
input中包含name属性并且属性值为指定val的元素
div[class~=one]
class属性值之一为‘one’的元素
div[id^=first_]
id不等于first的
2. 伪类过滤器
selector:xxx
1. 筛选当前元素是独生子的(ul下只有一个li的)
ul>li:only-child
2. 筛选当前元素在父元素中出现的位置(ul下的第一个li，最后一个，第n个)
ul>li:first-child
ul>li:last-child
ul>li:nth-child(参数)
参数：
数值 1、2、3
变量 odd even
表达式 n+3、2n+1
ul>li:nth-last-child(参数)（参数同上,但是倒着来的）
3.扩展
:first-of-type
:last-of-type
:nth-of-type(参数)
:nth-last-of-type(参数)
:hover
3. 伪元素过滤器(比如以下的用法为:在选择器下面添加其他元素,常用于使浮动元素的父元素撑起来)
::after
::before
2. 级联与继承
级联 当多个选择器应用到同一个元素中
1. 如果css声明不同，累加
2. 如果css声明相同，对比选择器的优先级，优先级胜出的应用其css声明
.list > li:nth-child(2) {
color: red;
}
#second {
color: #ededed;
background-color: pink;
}
==>
{
color: #ededed;
background-color: pink;
}
选择器的权重
1000 style属性
100 id选择器
10 类，伪类，属性
1 元素，伪元素
继承:能够被子元素所继承的属性有:
颜色，文字，字体间距行高对齐方式，和列表的样式
3.常见的长度单位
px
绝对单位，1像素
em
相对单位，相对于当前元素的字体大小
rem
相对单位，相对于html中设置的字体大小
百分比
80%
4.颜色单位
关键字 lightblue pink
十六进制 #333 #333333 #fff #000
函数 rgb(255,255,255)
函数 rgba(255,255,255,0.5)
5.字体样式
font-size（字体大小）
font-style(字体样式)
font-weight(字体宽度)
font-family(字体所属类)
"Microsoft Yahei","宋体",serif
color(字体颜色)
line-height(字体所占行高)
text-align(文本对齐方式)
text-decoration(下划线)
text-shadow（字体所占阴影）
text-indent(个块元素首行文本内容之前的缩进量)
速写形式
font: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family
font: normal normal normal normal 12px/1.5 "Microsoft Yahei","微软雅黑", Arial, sans-serif;