一、CSS书写方式
1、内嵌式写法;2、外嵌式写法;3、行内式写法
二、CSS语法格式
1、选择器{属性: 值; 属性:值;......}
选择器:选择(html标签,如:p标签,h标签,a标签)
简单选择器:标签选择器;类选择器(使用最多);ID选择器;通配符选择器
复合选择器:后代选择器(使用最多);并集选择器;标签指定式选择器(交集选择器)
属性:
background-color 背景颜色;color 前景色(文字颜色);font-size:20px 设置文字大小;width:20px; 设置宽度
height:20px; 设置高度;
2、标签选择器
注意:标签选择器,必须是html标签
标签名:{属性: 值;......}
div{
color: brown;
font-size: 30px;
width: 200px;
height: 200px;
background-color: aquamarine;
}
单位:px:像素;em:一个文字的大小1em。
颜色表示方式:1、直接设置颜色对应的单词;2、十六进制设置;3、以RGB的方式设置;4、RGBA():a:alpha 0--1;5、opacity:半透明效果
3、类选择器(class)
语法:
.自定义类名{属性: 值; 属性:值;...};类名不能以数字开头或纯数字,也不能以特殊字符开头
类选择器调用:
html标签通过class属性调动类样式;一个类样式可以被多个标签同时调用;一个标签可以同时调用多个样式
/*类选择器的定义*/
.public{
color: blue;
}
4、ID选择器
语法:#自定义名称{属性: 值}
调用:标签可通过ID属性调用
ID选择器与类选择器之间的区别:
◆一个ID样式只能被一个标签调用(身份证)
◆一个标签只能调用一个ID样式
5、通配符选择器
语法:
*{属性: 值;....}
特点:将页面中所有的标签都选中,设置样式。
6、font属性
☞font-size 设置文字大小
☞font-weight 设置文字加粗显示
☞font-style 设置文字斜体
◆normal 默认为正常显示
◆italic 文字斜体
☞font-family 设置文字字体
◆直接设置字体名称
◆ 设置字体对应的单词
◆line-height 设置文字的行高
注意:
☞该属性只对文字起作用。
7、font属性连写
语法: font:font-style font-weightfont-size/line-height font-family
◆在font属性联写中,font-size必须在font-family前面。
◆font属性联写中,如果属性都设置,那么按照 font:font-stylefont-weight font-size/line-height font-family 顺序写。
8、后代选择器
语法:
选择器 选择器{属性: 值;}
注意:
◆后代选择器,标签之间必须是嵌套关系
◆后代选择器,选择器与选择器之间必须有空格隔开。
◆后代选择器只能改变子元素中的样式。
9、标签指定式选择器
语法:
标签名.类名{属性: 值;}
标签之间的关系:
◆标签之间属于既.....又...的关系(指的是同一个标签)
10、并集选择器
语法:选择器,选择器{属性:值;...}
注意:
◆并集选择器,标签之间可以是嵌套关系可以是并列关系。