CSS
1,css的概念
css是层叠样式表
css是用来美化html标签的,相当于给页面化妆
css写在head中
2,选择器
选择器是一个选择谁(标签)的过程
写法
选择器{属性:值 ; 属性:值;}
属性 | 解释 |
20px; | 宽 |
height:20px; | 高 |
backgroud-color:red; | 背景颜色 |
font-size:24px; | 文字大小 |
text-align:left|center|right | 内容的水平对齐方式 |
text-indent:2em; | 首行缩进 |
color:red | 文字颜色 |
基础选择器
标签选择器
写法: 标签{属性:值;}
颜色的显示方式
直接写颜色的名称
十六进制显示颜色
0-9 a-f
#000000;前2位代表红色,中间2位代表绿色,后边两位代表蓝色。
如果6位值都一样那么可以只写3位
RGB
rgb(120,120,120)
RGBA
A代表alpha 不透明度 0-1
类选择器(重点)
写法: .自定义类名{属性:值; 属性:值;}
特点: 谁调用,谁生效。
一个标签可以调用多个选择器
多个标签可以调用同一个选择器
不建议使用汉字来定义类名
不推荐使用属性或者属性的值来定义类名
类选择器的命名规则
不能数字开头来定义类名
不能使用特殊字符,除了"_"
ID选择器
写法: #自定义名称{属性:值; 属性:值;}
特点: 一个ID选择器在一个页面只能调用过一次
一个标签只能调用一个ID选择器
可以同时调用类选择器和ID选择器
通配符选择器 不推荐使用
写法: *{属性:值; 属性:值;}
特点: 给所有的标签都使用相同的样式
复合选择器
概念:两个或者两个以上的基础选择器通过不通的方式连接在一起
交集选择器
写法:标签+类{属性:值; 属性:值;}
后代选择器
写法:选择器+空格+选择器{属性:值; 属性:值;}
特点:
无限迭代
只要能代表标签,标签、类选择器、ID选择器自由组合
子代选择器
写法:选择器>选择器{属性:值; 属性:值;}
并集选择器
写法:选择器,选择器{属性:值; 属性:值;}
文本元素
属性
font-size:16px; 文字大小
font-weight:700; 文字粗细,值从100-900,不推荐使用font-weight:blod;
font-family:微软雅黑; 文字的字体
font-style:normal(正常)| italic(斜体); 文字的风格
line-height: 行高
文本属性的连写
写法:font:italic 700 16px/40px 微软雅黑
文本属性连写大小和字体为必写项
顺序 font:风格 粗细 大小/行高 字体
文字的表达方式
直接写中文名称。
字体的英文名称
字体的Unicode编码
如何查找字体的unicode编码
打开浏览器→f12→console→escape("宋体")