1.CSS简介
CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
这里要说一下 w3c标准： html结构 / css样式 / js 行为(交互)
遵循的原则：先确定语义的HTML ，再选合适的CSS。
CSS 主要目的： 控制网页中元素的样式
CSS 可以让我们从HTML结构和样式分离出来。
CSS 可以让我们 专注结构。
CSS样式规则.png
CSS 注释
/*这是个注释*/
Html:<!--内容-->
Css:/*内容*/
2.CSS选择器分类
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素,在CSS中，执行这一任务的样式规则部分被称为选择器，CSS基础选择器有四种：
标签选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：
标记名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
eg.:
div {
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。
特点：让所有的标签都共同拥有同一个样式。
标签选择器有一个特点：后面加上的样式会覆盖前面的样式。
所有选择器其它都有一个共同点：就近原则。
类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
eg.:
<p class="name"></p>
.name {
font: 20px/1.5em “宋体”;
}
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
特点：给页面中的一个标签设置一个class属性之后，可以通过点加类名来给这个标签设置单独的样式。
注意：类选择器的优先级要高于标签选择器。
类选择器>标签选择器
id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
eg.:
<style type="text/css">
#id名 {
键1：值1;
键2：值2;
。。。。。
}
</style>
<p id=”id名”>这里面是内容</p>
如果要将所有的选择器进行一个优先级的排名：
那么：id选择器>类选择器>标签选择器
id选择器与类选择器在使用时候的注意点：
类名：（名字）同一个class可以给多个标签同时使用。
id名：（身份证号）同一个id不可以给多个标签同时使用的。
id一般是给javascript来使用的，样式尽可能的用class来完成。
因为一般情况下在开发过程中，js开发人员会自己给标签加上属于自己的id。
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
eg:
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
后代选择器：
父节点名称 子节点名称 ｛键：值;...｝
eg:
div span {
}
<div>
<p></p>
<span></span>
</div>
注意：其实后代选择器在寻找子节点的过程是从右往左找。
类选择器其实是可以跟标签选择同时使用。
关于选择器优先级:
行内样式(style=“") > id选择器(id=“") > class选择器
> 标签选择器 (eg: 小程序<view> H5 <p> <h1> ) > 通配符 ( * )的样式
> 继承的样式 (最外面标签设置样式,里面标签继承) > 默认的样式
很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用 !important。
.pink-text {
color: pink !important;
}
行内样式: <p class="aa" style="color:red">aa</p>
嵌套样式: 写在head中，并且用style标签包含。
外部样式: <link rel=”stylesheet” href=”路径” type=”text/css” />
css样式类型.png
important设置属性优先级高,但是一样要作用在同一标签,需要注意的是important不能被继承
important.png
3.属性设置
CSS字体样式属性
font-size: 字号大小 (推荐使用: px是相对单位)
font-family: 字体(可设置多个字体用逗号隔开)
font-weight:字体粗细(normal、bold、bolder、lighter、100~900)
font-style:字体风格(normal正常 italic字体有斜体才显示斜体 oblique斜体)
font:综合设置字体样式
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
font: 字体大小/行高 字体类型;
font: 20px/1.5em “宋体”; /*此时行高是30px = 20 x 1.5 */ 这是根据当前字体大小算出来的行高 ,可省略em不写
相对单位.png
font-family.png
CSS文本外观属性
color: 文本颜色(三种方式:预定义的颜色值,十六进制,RGB代码)
letter-spacing: 字间距(字符与字符之间的空白,默认normal)
word-spacing: 单词间距(属性用于定义英文单词之间的间距，对中文字符无效,默认为normal)
line-height: 行间距(像素px，相对值em和百分比% 使用最多的是像素px)
text-decoration: 文本装饰 (none：没有装饰 underline：下划线 overline：上划线 line-through：删除线)
text-align: 水平对齐方式(left默认 right center)
text-indent: 首行缩进(em字符宽度的倍数 2em)
white-space:空白符处理
word-break:自动换行(normal break-all 允许在单词内换行 keep-all 只能在半角空格或连字符处换行)
word-wrap :属性允许长单词或 URL 地址换行到下一行normal
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。
几乎得到了浏览器的支持
CSS中的三大特性：
1.继承
就是页面中的一些标签的属性可以继承给子标签：继承还是限制的。
一般情况下，所有的与文字图片的大小样式相当的属性都可以继承:font-x,line-x,一些标签的宽高也可以继承。与文本相关的都可以继承,如:font-size,text-align, text-indent,而height、width是不能被继承的。
2.层叠性
说白了就是标签之间的相互覆盖的关系。
3.优先级
行内样式(style=“") > id选择器(id=“") > class选择器 (类)
> 标签选择器 (eg: 小程序<view> H5 <p> <h1> ) > 通配符 ( * )的样式
> 继承的样式 (最外面标签设置样式,里面标签继承) > 默认的样式
块级元素和行内元素
Display:用来设置页面元素的显示方式。
Block:块级元素。
Inline:行内元素。
Inline-block:行内块级元素。
块级元素：
一个div单独占一行。
像这一些元素：（默认没有高但是有宽并且宽度默认占一行的元素）叫做块级元素。
特点：单独占一行，并且可以设置宽高。
行内元素：
像这一些元素：可以在一行中显示多个标签的元素叫行内元素。
特点：一行同显示多个，设置宽高没有效果。
行内块级元素：
像这一些元素：是不存在的是通过,后续的设置来改变的
CSS相关文章
《CSS简介,语法,选择器分类使用,属性设置》
《CSS盒子模型、内外边距、边框、行高、背景》
《CSS浮动、定位详解、标签嵌套显示隐藏、CSS初始化》
《CSS精灵图、滑动门详解》
我是楚简约，感谢您的阅读，
喜欢就点个赞呗，“❤喜欢”，
鼓励又不花钱，你在看，我就继续写~
非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~
网友评论