day3CSS基础介绍

s3.1CSS介绍

层叠样式表，又称串样式列表，由W3C定义和维护，一种用来为结构化文档（如html文档和XML应用）添加样式（字体，间距和颜色等）的计算机语言。

3.2CSS的使用

使用CSS可以让结构（HTML）和表现（CSS）分离，方便维护

3.3CSS的基本语法

选择器 {

​ 属性：属性值；

}

3.4CSS的四种引用方式

1.行间样式：应用内嵌样式到各个网页元素。**

<p style="color:red; margin-left=20px">p标签</p>

2.内联样式表

<style>
p {
    background-color:red;
}
</style>

3.外部样式：

（1）先创建一个css文件；

（2）再用link标签引入这个文件，Eemet语法：link:css

<link rel="stylesheet" href="css/style.css">

4.导入外部样式

1）先创建一个css文件；

（2）再style标签中用impor导入这个样式文件

以上四种CSS引用方式的区别：

行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个html文件引用

在实际项目开发中，最好使用外部样式。

外部样式分为link和import两种

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

3.5CSS选择器的分类

1.通配符选择器 *：匹配html中所有的元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时不建议使用）

* {
color:red
}

2.标签选择器：

span {
display:block;
margin-right:20px;
border:1px solid gray;
}

3.类选择器：用来命名class的标签**

.wrapper{

color:red;

}

4.ID选择器用ID命名的标签

#content{

color:pink;

}

5.派出选择器：

.box2 li{
color:red；
}

6.伪类选择器

7.伪元素选择器

3.6选择器的分组

让多个选择器（元素）具有相同的样式，一般用于设置公共样式。

h1, .box, p{

color:red;

}
p{
    width:100px
}

3.7选择器的继承

子元素可以继承父元素的样式

.test{
    font-size:18px;
}
.test span{
    font-weight:bold;
    font-size:12px//改写父元素传过来的大小
}

3.8优先级

外部样式<内部样式<内联样式

样式权重：

!important，加在样式属性值后，权重值为 10000。

内联样式，如：style=””，权重值为1000。

ID选择器，如：#content，权重值为100。

类、伪类，伪元素，如：.content、:hover 权重值为10。

标签选择器，如：div、p 权重值为1。

!imporant(10000)>内联样式（1000）>id选择器（100）>伪类选择器（10）>标签选择器（1）；

p{
   color:bule!important
    
}
<p style="color:red">这是内容</p>

3.9CSS字体

1.font-size:字号

{number+px} ：固定值尺寸像素。

{number+%} ：其百分比取值是基于父对

p { font-size: 20px; }
p { font-size: 100%; }

象中字体的尺寸大小。

2.font-famidly：字体

name ： 字体名称，按优先顺序排列,以逗号隔开。如果字体名称包含空格，则应使用引号括起。

p { font-family: Courier, "Courier New", monospace; }

3.font-style：样式

noemal（默认，正常的字体）/italic（斜体）/oblique(倾斜)

4.font-weight：加粗：

normal(默认，正常大小)/bold(粗体、lifhter)/lighter(比normal细)/{100-900} ：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

示例：

p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: 600; }

5.color：文字颜色

name ：颜色名称指定 color。

rgb ：指定颜色为RGB值。

{颜色16进制} :指定颜色为16进制

p { color: red; }
p { color: rgb(100,14,200); }
p { color: #345678; }

6.line-height:行高

normal ：默认值，默认行高。

{number+px} ：指定行高为长度像素。

{number} : 指定行高为字体大小的倍数。

p { line-height: normal; }
p { line-height: 24px; }
p { line-height: 1.5; }

7.text-decoration：文字修饰

normal ：默认值，无修饰。

underline ：下划线。

line-through : 贯穿线。

overline : 上划线。

p { text-decoration: underline; }
p { text-decoration: line-through; }
p { text-decoration: overline; }

8.text-align：文字对齐方式

left/center/right

9.text-transform：字母大小写

none ：默认值(无转换发生)。

capitalize ：将每个单词的第一个字母转换成大写。

uppercase : 转换成大写。

lowercase : 转换成小写。

p { text-transform: capitalize; }
p { text-transform: uppercase; }
p { text-transform: lowercase; }

10.text-indent：文本缩进

{number+px} ：首行缩进number 像素。

{number+em} ：首行缩进number 字符。

p { text-indent: 24px; }
p { text-indent: 2em; }

font复合属性：

font:font-style font-variant font-weight font-size/line-height font-famliy

1.注意属性值的位置顺序

2.除了font-size和font-family,其他任何一个属性值可以省略

3.font-variant：文本修饰

nomal/small-caps(当大写字母变得小一些)

3.10CSS背景

1.background-color:背景色（transparent/color）

2.background-image:背景图片(none/url)

3.background-repeat:背景图像铺排方式

repeat ：默认值(背景图像在纵向和横向平铺)。

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

repeat-x ：背景图像仅在横向平铺。

repeat-y ：背景图像仅在纵向平铺。

background-position:设置对象背景图像位置

background-attachment : 设置对象的背景图像滚动位置

scroll ：默认值。背景图像会随着页面其余部分的滚动而移动。

fixed : 当页面的其余部分滚动时，背景图像不会移动。

background: color image repeat attachment position

3.11CSS伪类选择器

伪类：用来表示元素的一种特殊状态

1.a标签的伪类：

a:visited ：已被访问状态。 a:link ：未访问状态。 a:hover ：鼠标悬停状态。 a:active ：用户激活

2:focus表单获得焦点时触发样式。

3.first-child:伪类来选择元素的第一个子元素。

a:link { color: green; } /*link:未访问的链接*/
a:visited { color: blue; } /*visited：已访问的链接*/
a:hover { color: red; } /*hover:当鼠标移动到链接上，则改变成红色*/
a:active { color: yellow; } /*active:当你鼠标选定该元素，则改变成黄色*/

3.12CSS属性选择器

[属性名]：包含有指定属性名的元素（常用）

[属性名=值]：属性名的值为指定值的元素（常用）

[属性名~=值]：属性名的值包涵指定值的元素

[属性名^=值]：属性名的值以指定值开头的元素

[属性名$=值]：属性名的值以指定值结尾的元素

a[href^='#']{
    display: block;
    text-decoration: none;
    color: #3fb5da;
    font-size: 14px;
}
a[href^='#']:hover{
    text-decoration: underline;
}

3.13关系选择器

1）空格：后代选择器

2）大于>:只选择儿子元素

3)+:兄弟选择器

3.14CSS伪元素

伪元素：用于向某些选择器设置特殊效果。伪元素和伪类的区别：

​ 伪类的操作对象是文档树中已有的元素，而伪元素则创建了文档树以外的元素

:first-letter 向文本的第一个字母添加特殊样式

:first-line 向文本的首行添加特殊样式。

:before 在元素之前添加内容。

:after 在元素之后添加内容

伪元素名和伪类名大小写不明感

:before/:after/:first-letter/:first-line
前面可以是一个冒号也可以是双冒号
：：slection/::placeholder/::backdrop:前面只能是双冒号

3.15总结

1.先整体样式，在局部处理，前期尽量多用不同的选择器组合。

2.换行可以 用
或者display:block利用块元素的性质