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.:

.name {

font: 20px/1.5em “宋体”;

}

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

特点：给页面中的一个标签设置一个class属性之后，可以通过点加类名来给这个标签设置单独的样式。

注意：类选择器的优先级要高于标签选择器。

类选择器>标签选择器

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

eg.:

#id名 {

键1：值1;

键2：值2;

。。。。。

}

这里面是内容

如果要将所有的选择器进行一个优先级的排名：

那么：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 {

}

注意：其实后代选择器在寻找子节点的过程是从右往左找。

类选择器其实是可以跟标签选择同时使用。

关于选择器优先级:

行内样式(style=“") > id选择器(id=“") > class选择器

> 标签选择器 (eg: 小程序 H5

) > 通配符 ( * )的样式

> 继承的样式 (最外面标签设置样式,里面标签继承) > 默认的样式

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用 !important。

.pink-text {

color: pink !important;

}

行内样式:

aa

嵌套样式: 写在head中，并且用style标签包含。

外部样式:

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: 小程序 H5

) > 通配符 ( * )的样式

> 继承的样式 (最外面标签设置样式,里面标签继承) > 默认的样式

块级元素和行内元素

Display:用来设置页面元素的显示方式。

Block:块级元素。

Inline:行内元素。

Inline-block:行内块级元素。

块级元素：

一个div单独占一行。

像这一些元素：(默认没有高但是有宽并且宽度默认占一行的元素)叫做块级元素。

特点：单独占一行，并且可以设置宽高。

行内元素：

像这一些元素：可以在一行中显示多个标签的元素叫行内元素。

特点：一行同显示多个，设置宽高没有效果。

行内块级元素：

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

CSS相关文章

我是楚简约，感谢您的阅读，

喜欢就点个赞呗，“❤喜欢”，

鼓励又不花钱，你在看，我就继续写~

非简书用户，可以点右上角的三个“...”，然后"在Safari中打开”，就可以点赞咯~