CSS简介,语法,选择器分类使用,属性设置

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单独占一行。
像这一些元素：（默认没有高但是有宽并且宽度默认占一行的元素）叫做块级元素。
特点：单独占一行，并且可以设置宽高。

行内元素：
像这一些元素：可以在一行中显示多个标签的元素叫行内元素。
特点：一行同显示多个，设置宽高没有效果。

行内块级元素：
像这一些元素：是不存在的是通过,后续的设置来改变的

作者：楚简约
链接：https://www.jianshu.com/p/5d682c019624