1.CSS简介
层叠样式表（Cascading Style Sheets）
- 定义了如何显示HTML元素
- 样式通常存储在样式表中
- 解决内容与样式的分离
- 可以提高工作的效率
样式层叠次序
- 浏览器缺省设置
- 外部样式表<link>
- 内部样式表<head>标签内部
- 内联样式<HTML>内部
2.CSS语法
CSS规则由两个部分组成：选择器和一条或者多条声明：
h1{color:blue;font-size:12px;}
选择器属性值
CSS颜色值得设定
color：#FF0000；
color：#F00；
color:rgb(255,0,0);
color：rgb(100%,0，0);
CSS注释：
/* 内容*/
ID选择器和类选择器
ID属性不要以数字开头，ID属性只能在HTML文档中出现一次。
#para{text-align:center;}
类选择不要以数字开头，可以在多个元素中使用。
.para{text-align:center;}
3.CSS创建
插入样式表的方法
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
<head> ???<link href="mystyle.css" type="text/css" rel="sytlesheet"></head>
内部样式表
<head> ???<style> ???hr{color:red;} ???</style></head>
内联样式表
<p style="color:red">这是一个段落</p>
多重样式
外部样式表h2{ ?coloe:red; ?text-align:left ; ??}内部样式表h2{ ?text-align:right ; ??}得到的样式h2{ ?coloe:red; ?text-align:right ; ??}层叠次序
- 浏览器缺省设置
- 外部样式表<link>
- 内部样式表<head>标签内部
- 内联样式<HTML>内部
优先级
分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类的数值决定。
权重计算
内联样式1000+ID选择器100+类选择器10+元素选择器1；
<html><head><style type="text/css">#redP p{ ?/*权值=100+1=101*/ ?color：red;/*红色*/}#redP.red em{ ?/*权值=100+10+1=111*/ ?color：blue;/*蓝色*/}#redP p span em{ ?/*权值=100+1+1+1=103*/ ?color：yellow;/*黄色*/}</style></head><body><div id="redP"><p class="red">red<span><em> em red</em></span></p><p>red</p></div></body></html>优先级选择器列表
- 通用选择器（*）
- 元素（类型）选择器
- 类选择器
- 属性选择器
- 伪类
- ID选择器
- 内联样式
优先级法则
- 选择器都有一个权值吗，权值越大越有优先；
- 权值相等时，后出现的样式设置优先于先出现的样式
- 创作者的优先级高于浏览着：网页编写者设置的样式高于浏览器设置的样式。
- 继承的样式不如后来指定的样式
- 在同一组中设有“!important”规则优先级最大（一般情况下不会用到）
4.CSS背景属性
- background-color 设置元素的背景颜色
- background-image 吧图像设置为背景 //默认是平铺重复显示
- background-repeat 设置图像是否重复 //水平或者是垂直平铺 repeat-x水平repeat-y垂直no-repeat不平铺
- background-attachement 背景图像是否固定还是随着页面的其余部分滚动
- background-position 设置背景图像的起始位置
- 按照以上顺序进行设置
div{ ??background-color:red; ??background-image:url(‘paper.gif‘) ?; ??background-repeat:repaet-x;/*no-repeat;repeat-y;repaet-x 不平铺;垂直平铺;水平平铺*/ ??background-position:top right;/*右上角*/
/*background：red url(‘paper.gif‘) repeat-x top right;*/
}background-position
关键字：top，bottom，right，center，left 百分数值：50% 50% 长度值：50px 100px （相对于左上角的位置）
单一关键子 等价关键字
top top center或center top
center center center
right right center或center right
left left center或center left、
bottom bottom center或center bottom
5.CSS 文字属性
- 文本颜色 color
- 文本对齐方式 text-align
- 文本修饰 text-decoration
- 文本准换 text-transform
- 文本缩进 text-indent
- 文本间隔 word-spacing
.div{ ???color:red;/*#FF0000,rgb(255,0,0),#F00,rgb(100%,0,0)*/ ???text-align: right;/*left,center,justify*/ ???text-decoration: overline ;/*line-through,underline*/ ???text-transform: uppercase;/*lowercase*/ ???text-indent: 50px; ???word-spacing: 30px; ???letter-spacing: 3px; ???line-height: 70%; ???direction:;}CSS教程
原文地址：https://www.cnblogs.com/wengbm/p/8203325.html