Css

CSS基础 注释/内容/

可以将CSS样式编写到元素的style属性当中。 将样式直接编写到style属性中,这种样式我们称为内联样式，内联样式只对当前的元素中的内容起作用,内联样式不方便复用。 内联样式属于结构与表现耦合，不方便后期维护，不推荐。 例：

hello

也可以将css样式编写到head中的style标签里将样式表编写的style标签中,然后通过css选择器选中指定元素然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用将样式表编写到style标签中,也可以使表现和结构进一步分离它也是我们推荐的使用方式 例：

还可以将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中,这样外部文件中的css样式表将会应用到当前页面中. 将css样式统一编写到外部的样式表中,完全使结构和表现分离,可以是样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的css文件 例： 先创建.css文件，然后写入样式表 p{ color:red; font-size:40px; } 然后在使用

CSS语法 选择器: -通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上。 声明块: -声明块紧跟在选择器的后边,使用一对{}括起来。 -声明块中实际上就是一组一组的名值对结构,这一组一组的名值对我们称为声明。 -在一个声明块中可以写多个声明,多个声明之间使用;隔开,声明的样式名和样式值之间使用:来连接

块元素和内联元素 所谓块元素就是会独占一行的元素，div就是一个块元素。 例：

div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为他里面的元素设置任何的默认样式，主要用来页面布局。

span是一个内联元素（行内元素） 所谓行内元素，指的是只占自身大小的元素，不会占用一行。 常见的内联元素：a img iframe span span没有任何语义，span标签专门用来选中文字，然后为文字设置样式。

a元素可以包含任意元素，除了它本身。 p元素不可以包含任何块元素。

常用选择器

元素选择器 作用:通过元素选择器可以选择页面中所有指定元素 语法：标签名 {} id选择器 作用：通过元素的id属性值选中唯一的一个元素 语法：#id属性值 {} 类选择器 作用：通过元素的class属性值选中一组元素 语法：.class属性值 {} 可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。 例：

则它既属于p2也属于hello 选择器分组(并集选择器) 作用：通过选择器分组可以同时选中多个选择器对应的元素 语法：选择器1,选择器2,选择器N{} 例：#p1,.p2,h1{ background-color:yellow; } 复合选择器（交集选择器） 作用：可以选中同时满足多个选择器的元素 语法：选择器1选择器2选择器N{} 通配选择器 选择页面中所有元素 语法：*{} 后代元素选择器 作用：选中指定元素的指定后代元素 语法：祖先元素 后代元素{} <！–空格隔开–> 子元素选择器 作用：选中指定父元素的指定子元素 语法：父元素 > 子元素 {} 元素之间的关系 父元素:直接包含子元素的元素 子元素:直接被父元素包含的元素 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素 兄弟元素:拥有相同父元素的元素叫做兄弟元素

伪类 伪类专门用来表示元素的一种的特殊的状态,比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 如： :link 表式普通链接（没访问的链接） 例：为没访问过的链接设置一个颜色为绿色 a:link{ color:green; } :visited 表示访问过的链接(由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色)

:hover 表示鼠标移入的状态 :active 表示的是超链接被点击时的状态

:hover和:active也可以为其他元素设置 :focus 获取焦点状态 例：input:focus{ background-color:yellow; } ::selection 表示选中内容的状态 (注意:这个伪类在火狐中需要采用另一种方式编写::-moz-selection)

伪元素 使用伪元素来表示元素中的一些特殊位置 如： :first-letter 第一个字符 :first-line 第一行 :before 表示元素最前面的部分 :after 表示元素最后面的部分 （一般before都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些内容） 例： 为p中第一个字符来设置一个特殊的样式 p:first-letter{ color:red; font-size:20px; }

属性选择器 title属性 这个属性可以给任何标签指定,当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示

属性选择器 作用：可以根据元素中的属性或属性值来选取指定元素 语法 [属性名] 选取含有指定属性的元素 [属性名=“属性值”] 选取含有指定属性值的元 [属性名^=“属性值”] 选取属性值以指定内容开头的元素 [属性名$=“属性值”] 选取属性值以指定内容结尾的元素 [属性名*=“属性值”] 选取属性值以包含指定内容的元素

子元素选择器 :first-child 可以选中第一个子元素 :last-child 可以选中最后一个子元素 :nth-child 可以选中任意位置的子元素 ·该选择器后面可以指定一个参数，指定要选中第几个子元素 even -表示偶数位置的子元素 odd -表示奇数位置的子元素 :first-of-type :last-of-type :nth-of-type ·和:first-child类似，只不过child，是在所有的子元素中排列。而type，是在当前类型的子元素中排列。

兄弟元素选择器 后一个兄弟选择器 作用：可以选中一个元素后紧挨着的指定的兄弟元素 语法：前一个+后一个 选中后边所有兄弟元素 语法：前一个~后边所有

否定伪类 作用：可以从已选中的元素中剔除某些元素 语法： :not(选择器) 例： 为所有的p元素设置背景颜色为黄色，除了class值为hello的 p:not(.hello){ background-color:yellow; }

样式的继承 像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承,利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式。但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承。

选择器的优先级 当使用不同的选择器,选中同一个一元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。 优先级规则： 内联样式, 优先级1000 id选择器, 优先级100 类和伪类, 优先级10 元素选择器,优先级1 通配* , 优先级0 继承的样式没有优先级

当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较, ,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。

并集选择器的优先级是单独计算的

可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important 例： .p1{ color:yellow; background-color:greenyellow !impotant; }

列表 列表就相当于去超市购物时的那个购物清单,在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表

无序列表 使用ul标签来创建一个无序列表 使用li在ul中创建一个个的列表项 通过type属性可以修改无序列表的项目符号 可选值: disc,默认值,实心的圆点 square,实心的方块 circle,空心的圆 注意:默认的项目符号我们一般都不使用! !如果需要设置项目符号,则可以采用为1i设置背景图片的方式来设置，ul和li都是块元素

有序列表 有序列表和无序列表类似,只不过它使用ol来代替ul，有序列表使用有序的序号作为项目符号，ol也是块元素 type属性,可以指定序号的类型 可选值: 1,默认值,使用阿拉伯数字 a/A采用小写或大写字母作为序号 i/1采用小写或大写的罗马数字作为序号

定义列表 定义列表用来对一些词汇或内容进行定义使用dl来创建一个定义列表dl中有两个子标签 dt:被定义的内容 dd:对定义内容的描述

单位

颜色单位(RGB)

在CSS可以直接使用颜色的单词来表示不同的颜色，也可以使用RGB值来表示不同的颜色 所谓的RGB值指的是通过Red Green Blue三元色,过这三种颜色的不 同的浓度,来表示出不同的颜色 例： rgb(红色浓度,绿色浓度,蓝色浓度); 颜色的浓度需要0-255之间的值，255最大，0为没有 浓度也可以采用一个百分数来设置,需要一个0%-100%之间的数字，使用百分数最终也会转换为0-255之间的数

十六进制RGB 也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样,只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色 语法：#红绿蓝 像这种两位两位重复的颜色,可以简写比如: #ff0000可以写成#f00

文字

color:颜色; 设置字体颜色

font-size:大小; 设置文字的大小,浏览器中一般默认的文字大小都是16px font-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小，一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不同

font-family:样式; 指定文字的样式 当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持，则使用默认字体 ,该样式可以同时指定多个字体,多个字体之间使用,(逗号)分开当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个 浏览器使用的字体默认就是计算机中的字体，如果计算机中有,则使用,如果没有就不用(C:\Windows\Fonts 字体所在位置) 在开发中,如果字体太奇怪,用的太少了,尽量不要使用,因为可能用户的电脑没有此字体，达不到想要的效果 在网页中将字体分成5大类: serif(衬线字体) sans-serif (非衬线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式 一般会将字体的大分类,指定为font-family中的最后一个字体

font-style: 作用：设置文字斜体 可选值： normal 默认值，文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的一般我们只会使用italic

font-weight: 作用：设置字体的加粗效果 可选值： normal 默认值 bold 文字加粗显示 该样式也可以指定100-900之间的9个值,但是由于用户的计算机往往没有这么多级别的字体,所以达到我们想要的效果也就是200有可能比100粗, 300有可能比200粗,但是也可能是一样的

font: 在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值,统一写在font样式中,不同的值之间使用空格隔开,无顺序要求 但是要求文字的大小和字体必须写，而且字体必须是最后一个，大小必须是倒数第二个 例 p{ font:italic small-caps bold 60px “微软雅黑”; }

行间距

在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大 line-height: 使用line-height来设置行高行高类似于我们上学单线本,单线本是一行一行,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示 行间距=行高 - 字体大小 通过设置line-height以间接的设置行高, 可以接收的值: 1.直接接受一个大小 2.可以指定一个百分数，则会相对于字体去计算 3.可以直接传一个数值，则行高会设置字体大小相应的倍数 对于单行文本来说,可以将行高设置为和父元素的高度一致, 这样可以使单行文本在父元素中垂直居中 在font中也可以指定行高 ·在字体大小后可以添加/行高,来指定行高,该值是可选的,如果不指定则会使用默认值

文本样式 text-transform: 作用：设置文本的大小写 可选值： none 默认值,该怎么显示就怎么显示,不做任何处理 capitalize 单词的首字母大写,通过空格来识别单词 uppercase 所有的字母都大写 lowercase 所有的字母都小写

text-decoration: 可选值： none: 默认值,不添加任何修饰,正常显示 underline 为文本添加下划线 overline 为文本添加上划线 line-through 为文本添加删除线 超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline,如果需要去除超链接的下划线则需要将该样式设置为none

letter-spacing 作用：指定字符间距 例： letter-spacing:10px; 字符间距为10px word-spacing 作用：设置词与词之间的距离，实际上是设置词与词之间的空格大小

text-align 作用：设置文本的对齐方式 可选项： left默认值,文本靠左对齐 right,文本靠右对齐 center ,文本居中对齐 justify，两端对齐 ,通过调整文本之间的空格的大小,来达到一个两端对齐的目的的

text-indent 作用：设置首行缩进 当给它指定一个正值时，会自动向右侧缩进指定的像素 如果为它指定一个负值,则会向左移动指定的像素通过这种方式可以将一些不想显示的文字隐藏起来 例： text-indent:2em 缩进两个字符