CSS引入方式,选择器和常用样式设置

CSS引入方式,选择器和常用样式设置

1.CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)

• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一
• CSS 样式表极大地提高了工作效率

2.CSS基础语法

• CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
• 每条声明由一个属性和一个值组成
• 选择器 { 属性名：属性值；属性名：属性值….}
• 由多组属性名和属性值组成，而且每一组属性名和属性值之间用分号隔开

selector {declaration1; declaration2; ... declarationN }

//选择器{属性名: 属性值}
selector {property: value}

// 案例分析: 
h1 {color:red; font-size:14px;}

3.CSS引入方式

行内式

• 直接写在标签内，通过标签属性style引入；
• <开始标签 style = “属性名：属性值”> 内容 </ 结束标签>

<div style="color:red;">我是div元素</div>

内嵌式

• 将css代码写在style元素内，通过css选择器来选择html元素，将css样式添加给这个元素；

<style>
    div{color:red;}
</style>
<div>div1</div>
<div>div1</div>

外链式

• 将css代码单独放在一个css文件中，再通过link标签将这个css文件引入到html页面中;

<link rel="stylesheet" href="css.css" type="text/css">

导入式

• 引入一个单独的css文件
• 在style元素或者link样式中；
• 它既不是html标签，也不是css样式；
• 它一条声明语句；

<style>
   @import "index.css";
</style>

外链式和导入式的差别(面试题)

• link和@import虽然都是引入外部的css文件，但是他们是由天差地别的区别的;
• link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中;
• 他们的加载顺序也是有区别的，当一个页面被加载的时候，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载;
• 当使用javascript控制DOM去改变css样式的时候，只能使用link标签，因为@import是不能被DOM控制的;

4.CSS常用选择器及权重

标签选择器及权重

• 直接将HTML元素的标签名当做选择器来用
• 语法：标签选择器{css属性名:css属性值;} p{color: black}
• 权重：1

类选择器及权重> - 将html元素的class标签属性值，当做选择器使用，需要在这个标签属性值前面加"." ，一个HTML元素可以有很多个标签属性值(类名)，每个类名之间用空格隔开；类名可以重复使用；

• 语法：类选择器{css样式;} .box{color: black}
• 权重：10

ID选择器及权重

• 将html元素的id标签属性值，当做选择器使用，需要在这个标签属性值前面加"#", 一个HTML元素，id标签属性值只能用一次，id在html中具有唯一性；
• 语法：ID选择器{css样式;} #box{color: black}
• 权重：100

通配符选择器及权重

• 匹配全部HTML元素 , 一般不使用，因为全部匹配比较耗性能,一般用来清除浏览器默认自带的间距样式
• 语法 *{ margin:0;padding:0; }
• 权重：0 ~ 1

后代选择器(派生选择器)

• 在一个根元素的范围内，查找到它的后代元素, 符号用空格隔开
• 语法：祖辈选择器 后代选择器{} ul li{}
• 权重: 单个选择器权重之和

属性选择器及权重

• 利用标签的属性名和属性值来选择html元素
• 语法: [标签属性名]{ 属性名：属性值}、[标签属性名 = 属性值]{ 属性名：属性值} [title]{} 、 [title=zfpx]{}
• 权重: 10

分组/并集选择器及权重

• 同一份css样式，可以一次性的添加给多个不同html元素
• 语法：选择器1，选择器2，选择器3 {属性名：属性值 } h1, h2, h3{color: black}
• 权重：分组选择器将不同的html分为一组，权重计算的时候都是独立计算，不会叠加

集选择器及权重

• 两种选择器同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择,准确查找html元素，增加html元素权重
• 语法: 交集选择器是由两个选择器组合到一起, 交集选择器中间没有任何符号或者空格; p.box{color: black}
• 权重：所有组合选择器权重之和

子级选择器及权重

• 存在包含关系的元素选择，通过父级确定选择子级 ; 父级选择器是用来确定取值范围 , 子级选择器才是我们要添加样式的那个元素 , 子级选择器必须是紧邻的父子关系
• 语法：父级选择器 > 子级选择器 { 属性名 : 属性值} ul>li{color: black}
• 权重：所有选择器之和

伪类选择器及权重

• 给页面（元素）添加某种状态，叫做伪类选择器；
• 权重: 10
• :link{} 默认的状态
• :hover{} 鼠标经过（滑过）的状态
• :active{} 点击时的状态
• :visited{} 点击后的状态

伪元素选择器及权重

• 通过css代码向指定元素内添加假的(html中不存在)的元素, :before 会出现在元素所有内容之前, :after 会出现在元素所有内容之后
• 使用伪元素的时候要保证两个前提：
  • 要有display：block 这个属性
  • 要有content这个属性，这个属性的属性值可以为空，但是引号不能少

5.CSS样式之颜色设置

• color: 检索或设置对象的文本颜色;
• opacity: 检索或设置对象的不透明度; 使用浮点数指定对象的不透明度。值被约束在[0-1]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值;

颜色的三种表示方式

• 十六进制颜色：十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
• RGB颜色：RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）
• 颜色的名称：例如： white，red，black等等；

RGBA的作用

• RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道， 它规定了对象的不透明度，alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

常用的颜色

• 黑色： #000 、black 、rgb(0,0,0)
• 白色： #fff 、white、 rgb(255,255,255)

// 对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果, 示例代码：
div{opacity:.5;} /* for IE9 and other browsers */
div{filter:alpha(opacity=50);} /* for IE8 and earlier */

6.CSS样式之文字设置

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）

• font 复合样式 font-style | font-variant | font-weight | font-size | line-height | font-family
• 字体样式: font-style
• 文本是否为小型的大写字母：font-variant
• 字体粗细: font-weight
• 字体的大小: font-size
• 字体的类型: font-family

字体样式: font-style

• normal：指定文本字体样式为正常的字体
• italic： 指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
• oblique： 指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

文本是否为小型的大写字母: font-variant

• normal： 正常的字体
• small-caps：小型的大写字母字体

字体粗细: font-weight

• normal： 正常的字体。相当于数字值400
• bold： 粗体。相当于数字值700。
• bolder： 定义比继承值更重的值
• lighter： 定义比继承值更轻的值
• integer： 用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

字体大小: font-size

• 单位: px
• 单位: %

字体系列: font-family

• family-name = arial | georgia | verdana | helvetica | simsun and etc（字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起）
• generic-family = cursive | fantasy | monospace | serif | sans-serif(字体序列名称)
• body { font-family: helvetica, verdana, sans-serif; }
  >

7.CSS样式之文本设置

CSS文本属性可定义文本的外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

• 文本颜色： color
• 字符间距 : letter-spacing
• 设置行高： line-height
• 文本对齐方式： text-align
• 文本修饰： text-decoration
• 文本缩进： text-indent ( em缩进字符）
• 文本阴影： text-shadow
• 文本转换 ： text-transform
• 设置元素的垂直对齐：vertical-align
• 设置元素中空白的处理方式： white-space
• 设置字间距 ：word-spacing

text-transform 检索或设置对象中的文本的大小写

• none： 无转换
• capitalize： 将每个单词的第一个字母转换成大写
• uppercase： 将每个单词转换成大写
• lowercase： 将每个单词转换成小写

white-space设置或检索对象内空格的处理方式

• normal： 默认处理方式。
• pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
• nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
• pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

word-break 设置或检索对象内文本的字内换行行为

• normal： 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
• keep-all： 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
• break-all： 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。
• 对于异议解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all属性值；

word-wrap 设置或检索当内容超过指定容器的边界时是否断行

• normal： 允许内容顶开或溢出指定的容器边界。
• break-word： 内容将在边界内换行。如果需要，单词内部允许断行。

overflow-wrap 设置或检索当内容超过指定容器的边界时是否断行

• normal： 允许内容顶开或溢出指定的容器边界。
• break-word： 内容将在边界内换行。如果需要，单词内部允许断行
• CSS3中将 改名为 overflow-wrap

text-align 设置或检索对象中内容的水平对齐方式

• left： 内容左对齐。
• center： 内容居中对齐。
• right： 内容右对齐

word-spacing 检索或设置对象中的单词之间的最小，最大和最佳间隙

• normal：默认间隔
• length：用长度值指定间隔。可以为负值。
• percentage：用百分比指定间隔。可以为负值。（CSS3）

letter-spacing 检索或设置对象中的字符之间的最小，最大和最佳间隙

• normal：默认间隔
• length: 用长度值指定间隔。可以为负值。
• percentage：用百分比指定间隔。可以为负值。（CSS3）

text-indent 检索或设置对象中的文本的缩进

• length：用长度值指定文本的缩进。可以为负值。
• percentage：用百分比指定文本的缩进。可以为负值。

vertical-align 设置或检索内联元素在行框内的垂直对其方式

• baseline： 将支持valign特性的对象的内容与基线对齐
• sub： 垂直对齐文本的下标
• super： 垂直对齐文本的上标
• top： 将支持valign特性的对象的内容与对象顶端对齐
• text-top： 将支持valign特性的对象的文本与对象顶端对齐
• middle： 将支持valign特性的对象的内容与对象中部对齐
• bottom： 将支持valign特性的对象的文本与对象底端对齐
• text-bottom： 将支持valign特性的对象的文本与对象顶端对齐
• percentage： 用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。
• length： 用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。（CSS2）

line-height 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

• normal： 允许内容顶开或溢出指定的容器边界。
• length: 用长度值指定行高。不允许负值。
• percentage：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。
• number: 用乘积因子指定行高。不允许负值。

8.CSS继承特性

CSS样式具有继承性，所谓的继承性，就是给某些元素设置样式时，后代元素也会自动继承父类的样式

• 关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的；
• 关于盒子、定位、布局的属性，都不能继承；

无继承性的属性

• display：规定元素应该生成的框的类型
• 文本属性：
  • vertical-align：垂直文本对齐
  • text-decoration：规定添加到文本的装饰
  • text-shadow：文本阴影效果
  • white-space：空白符的处理
• 盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
• 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
• 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline-style、outline-width、outline-color、outline
• 页面样式属性：size、page-break-before、page-break-after
• 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

有继承性的属性

• 字体系列属性
  • font：组合字体
  • font-family：规定元素的字体系列
  • font-weight：设置字体的粗细
  • font-size：设置字体的尺寸
  • font-style：定义字体的风格
  • font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
  • font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
  • font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
• 文本系列属性
  • color：文本颜色
  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：增加或减少单词间的空白（即字间隔）
  • letter-spacing：增加或减少字符间的空白（字符间距）
  • text-transform：控制文本大小写
• 元素可见性：visibility
• 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
• 列表布局属性：list-style-type、list-style-image、list-style-position、list-style
• 生成内容属性：quotes
• 光标属性：cursor
• 页面样式属性：page、page-break-inside、windows、orphans
• 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

所有元素可以继承的属性

• 元素可见性：visibility
• 光标属性：cursor

内联元素可以继承的属性

• 字体系列属性
• 除text-indent、text-align之外的文本系列属性

块级元素可以继承的属性

• text-indent、text-align

9.CSS层叠特性

层叠性：就是css处理冲突的能力；对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器；

权重总结

• 先看有没有选中，如果选中，则以(id数量，类数量，标签数量)来计算权重，谁大听谁的，如果都一样，听后写的为准。
• 如果都没有选中，那么权重为0,如果大家都是0，就近原则

样式表冲突的总结

• 对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
• 对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
• 外部样式表的ID选择器 > 内嵌样式表的标签选择器