02.CSS基础

CSS-----层叠样式表（级联页面中文本的内容样式表）

作用：主要用于设置HTML（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

在HTML中应用css有三种方式：

1、行内式（内联样式）：通过标签的style属性来设置元素的样式。

基本语法格式：

<标签名 style="属性1：属性值1;属性2:属性值2;">内容</标签名>

2、内嵌式（内部样式表）：将css代码集中写在HTML文档的head头部标签中，并用style标签定义。

基本语法格式：

<style type="text/css">css样式定义</style>

3、外链式（外部样式）：把所有的样式放在一个或多个以css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

基本语法格式：

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

 

注：href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

       type:定义所链接文档的类型，在这里需要制定为"text/css",表示链接的外部文件为css样式表。

       rel:定义当前文档与被链接文档之间的关系，在这里需要制定为"stylesheet"，表示被链接的文档是一个样式表文件。

css样式规则的具体格式：

一、选择器（重点）

1、css基础选择器

1.1标签选择器（元素选择器）：是指用HTML标签名作为选择器，按标签名称分类。为页面中某一类标签指定同一的css样式。

基本语法格式：

标签名 {
        属性1: 属性值1;
        属性2: 属性值2;
       }

优点：能快速为页面中同类型的标签统一样式。

缺点：不能设计差异化样式。

标签选择器可以把某一类标签全部选择出来 div span

1.2类选择器：使用"."进行标识，后面紧跟类名。

基本语法格式：

.类名 {
        属性1: 属性值1;
        属性2: 属性值2;
        }

标签调用用class="类名" 即可。

优点：可以为元素对象定义单独或相同的样式，可以选择一个或多个标签。

小技巧：

长名称或词组可以视同中横线来为选择器命名。

不建议使用"_"下划线来命名css选择器。（JavaScript变量命名规则用"_"）。

不要纯数字、中文等命名，尽量用英文字母来表示。

1.3 多类名选择器：我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

样式显示效果跟HTML元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关。

各类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

1.4 id选择器：使用"#"进行标识，后面紧跟id名。

基本语法格式：

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

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

用法和类名选择器相同。

1.5 通配符选择器：用"*"号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素。

基本语法格式：

* {
    属性1:属性值1；
    属性2:属性值2;
    }

一般只用于清除HTML标记的默认边距：

* {
    margin:0;/*定义外边距*/
    padding:0;/*定义内边距*/
    }

2、css复合选择器：

是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

2.1 交集选择器：由两个选择器构成，其中第一个为标签选择器，第二个为类选择器，两个选择器之间不能有空格，如h3 .special。（用的相对来说比较少，不建议使用）。

举例： p .one 选择的是：类名为 .one的 段落标签。

2.2并集选择器：是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器、id选择器）等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为他们定义相同的css样式。

举例：.one, p, #test {color: #F00;}表示： .one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

2.3后代选择器（包含选择器）：用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择，它能选择任何包含在内的标签。

2.4 子代选择器：只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，注意，符号左右两侧各保留一个空格。

注意：这里的子指的是亲儿子，不包含孙子，重孙子之类的。

举例 ：.demo > h3 {color: red;} 说明：h3一定是demo亲儿子，demo包含着h3.

2.5 伪类选择器：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，比如可以选择第一个，第n个元素。

类 .one  伪类 :link   (类选择器是一个点 伪类是两个点)

链接伪类选择器：

:link /*未访问的链接*/

:visited/*已访问的链接*/

:hover /*鼠标移动到链接上*/

:active /*选定的链接*/

二、标签显示模式（display）

HTML标签一般分为块级标签（block）、行内标签（inline）和行内块标签（inline-block）。

1、块级元素（block）:每个块元素通常都会独自占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见块级元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。

块级元素的特点：

总是从新行开始。

高度，行高，外边距以及内边距都可以控制。

宽度默认是容器的100%。

可以容纳内联元素和其他块元素。

2、行内元素（inline）：不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。

行内元素的特点：

和相邻行内元素在一行上。

高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或者其他行内元素（a特殊，a里面可以放块级元素）。

注意：

只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1~h6，dt,他们都是文字类块级标签，里面不能放其他块级元素。

链接里面不能再放链接。

a里面可以放块级元素。

3、行内块元素（inline-block）：可以对他们设置宽高和对齐属性。

特点：

和相邻行内元素（行内块）在一行上，但是之间会有空白缝隙。

默认宽度就是它本身内容的宽度。

高度，行高，外边距以及内边距都可以控制。

三、CSS字体样式属性

1、font-size:字号大小

用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

2、font-family:字体

用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

例子：将网页中所有段落文本的字体设置为微软雅黑  p{ font-family:"微软雅黑";}

可以同时指定多个字体，中间用逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

常用技巧：

现在网页中普遍使用14px+。

尽量使用偶数的数字字号。

各种字体之间必须使用英文状态下的逗号隔开。

中文字体需要加英文状态下的引号，英文字体一般不需要加引号。

当需要设置英文字体时，英文字体名必须位于中文字体名之前。

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3、CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。

4、font-weight:字体粗细：文字加粗除了用b和strong标签之外，可以使用CSS来实现，但是CSS是没有语义的。

可用属性值：normal/bold/bolder/lighter/100~900(100的整数倍）。

小技巧：

css 数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

5、font-style:字体风格：文字倾斜除了用i和em标签之外，可以使用css来实现，但是css是没有语义的。

可用属性值：

normal(默认值)/italic 斜体/oblique 倾斜

小技巧：

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

6、font:综合设置字体样式（重点）

基本语法格式：

选择器 {
    font:font-style font-weight font-size/line-height font-family;
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：

其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

四、CSS外观属性

1、color:文本颜色

取值有以下三种：

预定义的颜色值，如red.pink等。

十六进制：如#FF0000等，实际工作中，十六进制是最常用的定义颜色的方式。

RGB代码：如红色可以表示为rgb(255,0,0)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分比，必须写0%。

2、text-align:水平对齐方式用于设置文本内容的水平对齐，相当于html中的align对齐属性。

可用属性值如下：

left:左对齐（默认值） 

right:右对齐

center:居中对齐（是让盒子里面的内容水平居中，而不是让盒子居中对齐）

3、text-indent:首行缩进

属性值可为不同单位的数值，em字符宽度的倍数或相对于浏览器窗口的百分比，允许使用负值，建议使用em作为设置单位。

1em就是一个字的宽度。

4、text-decoration 文本的装饰：通常用于给链接修改装饰效果

属性值：

none(默认)定义标准的文本。

underline:文本下的一条线。（下划线也是链接自带的）

overline:文本上的一条线

line-through:穿过文本的一条线

五、CSS背景（background）

css可以添加背景颜色，以及进行图片设置。

background-color	背景颜色
background-image	图片背景地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置	背景的合写

1、背景图片（image）

语法：

background-image: none||url(url)

参数：

none:无背景图（默认的）。

url: 使用绝对或相对地址指定背景图像。

 

2、背景平铺（repeat）

语法：

background-repeat: repeat|no-repeat|repeat-x|repeat-y

参数：

repeat:背景图像在纵向和横向上平铺（默认的）。

no-repeat:背景图像不平铺。

repeat-x:背景图像在横向上平铺。

repeat-y:背景图像在纵向上平铺。

3、背景位置（position）

语法：

background-position:length||length
background-position:position||position

参数：

length:百分数，参阅长度单位。

position:top|center|bottom|left|right

说明：

设置或检索对象的背景图像位置，必须先指定background-image属性。默认值为（0%，0%），如果只指定了一个值，该值将用于横坐标，纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

position后面是x坐标和y坐标。可以使用方位名词或者精确单位。

如果和精确单位和方位名词混合使用，则必须是x坐标在前，y坐标在后面。

实际工作中用的最多的，就是北京图片居中对齐。

4、背景附着（background-attachment）

语法：

background-attachment:scroll|fixed

参数：

scroll:背景图像是随对象内容滚动

fixed:背景图像固定

说明：

设置或检索背景图像是随内容滚动还是固定的。

六、背景透明（CSS3）

background:rgba(0,0,0,.3);

最后一个参数是alpha透明度 取值在0~1；

注：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

七、CSS三大特性：层叠、继承、优先级

1、css层叠性：指多种css样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。 就近原则

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪一个样式。

样式不冲突：不会层叠。

2、css继承性：书写css样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）。

3、css优先级：定义css样式时，经常出现两个或者更多的规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

`继承样式的权重为0：在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先：应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100；

权重相同时，css遵循就近原则，也就是说靠近元素的样式有最大的优先级，或者说排在最后的样式优先级最大。

css定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大的优先级。

css特殊性(Specificity)

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准。

跟着黑马程序员学习自己整理的内容。