1、CSS标准
CSS语法 p{ color:blue};
选择器{属性:值;属性:值;}
选择器通常是需要改变样式的html元素。
class 命名的意思,可以分别同样的标签。
id 和class同样的效果 但id只能出现一次 不能同名。id优先级高与class
class优先级高于标签 标签优先级高于全局。
2、css选择器
全局选择器:*{} 可以选择页面所有的东西。
标签选择器: p{} 给body里的标签添加属性
类别选择器:.xxx
id选择器:#(id名)
.a{color:red;}
.a{color:blue;}
会显示第二个。
伪类选择器::hover 显示出当鼠标移到的另一种样式。
后代选择器<span></span> 子孙, 可以显示后面所有的子元素样式。
子代选择器>span 子代, 只能显示后面第一代的样式。
群组选择器:h1,p,a{} 可以群体的添加属性。
交叉选择器:是由两个选择器直接连接构成的。
3、CSS选择器的优点:
准确的控制内容的样式
代码简化,争取最少的代码量。
代码美观,易读。
利用样式优先级的区别实现样式的覆盖
4、CSS引用方式:
标签内引入:直接在标签里加style样式。
内嵌式:在head部分加入<style>标签
链接式:在head部分加入 link标签,引入外部CSS文件。
行内样式优先级高于内嵌式
内嵌式优先级高于链接式
5、颜色定义:
p{color:red;}
rgb p{color:rgb(0,0,0)}
rgba p{color:rgba(255,0,0,0~1)}
opacity 透明度的属性
rgba()和opacity都能实现透明效果但是opacity是作用于元素,
以及元素内的所有内容的透明度(有继承性),而rgba()作用
于元素的颜色、背景。
filter:alpha(opacity=40);过滤 低版本的浏览器使用
四种颜色定义方式:颜色名称, RGB方式, 十六进制的方式, RGBA方式。
6、Font字体
控制文字大小:
font-size 字体大小 font-family 字体类型
设置文字倾斜效果:
font-style: normal 正常
oblique 偏斜体
italic 斜体
设置文字加粗效果:
font-weight:100~900
bold 字体加粗
normal 正常
lighter 字体变细
文字装饰效果:
text-decoration:none; 去除超链接的下划线(正常显示)
underline 加下线。
line-through 删除线
overline; 加顶线
设置文字水平对齐方式:
text-align:justify;两端对齐
left 居左
center 居中
right 居右
英文字母大小写转换:
text-transform:capitalize;首字母大写
uppercase; 全部大写
lowercase; 全部小写
设置段落首行缩进:
text-indent:2em; 缩进2字符
设置字词间距:
letter-spacing 汉字 英文
word-spacing 中文无效
设置段落的垂直对齐方式:
vertical-align: middle 中
top 上
bottom 下
basline 默认
设置行高
line-height: 设置行高
设置为和高一样内容自动居中