CSS，后续盒模型还在持续更新
二、CSS初步 2.1.CSS概述、 1.CSS的优势
表现和内容分离，提高网页浏览速度，易于维护和改版，便于信息检索
2.2.CSS的创建创建CSS分为三步：1.创建HTML标记文档 2.编写样式规则 3.将样式规则附加到文档
1.标记文档 标记创建了文档的结构，通常称为结构层，表现层可以应用在结构层之上；内容：页面实际要传达的真正信息，包括数据、文本、文档或图片。不包括辅助信息，如导航菜单、装饰图片等。
结构： 就是对网页内容进行整理和分类。HTML
表现：对结构化的信息进行样式上的控制，如对颜色、大小、背景等外观进行控制，所有这些用来改变内容外观的，称为“表现”。CSS
行为：是对内容的交互及 *** 作效果，如JavaScript，就是动态控制网页信息的结构和显示，实现网页的智能交互。
2.编写规则1.CSS语法由三部分构成：选择器、属性、值
selector { property : value ; }
selecor：选择器,表明花括号中的属性设置将应用于哪些HTML元素，例如“body”
property：属性,例如用于设置背景色的属性“background-color”等等
value：值,比如“background-color”属性的值可以是“FF0000”代表红色
2.具体CSS规则：
如果要定义不止一个声明，则需要用分号将每个声明分开。
如果值为若干单词，则要给值加引号
CSS忽略声明块中的空白和回车,空格的使用使得样式表更容易被编辑
3.附加方式内联样式表：是连接样式和标签的最简单方式
只需在标签中包含一个style属性，后面再跟上一系列属性及属性值即可
要添加多个属性，只需要将它们用分号隔开
内联样式只应用于它们所在的元素
This is a paragraph
文档样式表(嵌入样式表)：当单个文档需要特殊的样式时，就应该使用文档样式表。文档样式表放在与内的结束标签之间
只对该文档有效，会影响文档中所有相同标签的内容
外部样式表：
还可以把样式表存储在一个独立的、纯文本的文档中，由浏览器通过网络进行加载，这就是外部样式表
外部样式表必须使用.css后缀名
可以用两种不同的方式将外部样式表加载到文档：链接或导入
1.链接式外部样式表
rel="stylesheet":定义被链接的文档与当前文档的关系。链接到样式表时，属性值往往是stylesheet
type="text/css":表示样式表的数据类型是text/css
Titles are required.
2.导入式外部样式表
在文档head部分的
三种样式表的优缺点
外部样式表
优点：给文档的显示提供一致性，管理简单；容易被其他网页制作者拷贝
缺点：浏览器需下载样式表，增加了访问页面的时间
文档样式表
优点：创建自定义文档，改写外部样式表中的一条或多条规则；便于测试即将加入到外部样式表的新规则
缺点：适合给单个文档加规则，不适合管理一个文档集
内联样式表
优点：可覆盖文档样式表或外部样式表中的样式
缺点：难维护，难阅读，且只具有局部效果，应尽量少用内联样式
2.3基本选择器 元素选择器:element是标签名文档的元素就是最基本的选择器
h1 {
font-family:隶书;
}
p {
font-size:16px;
}
在类选择器中，类名用句点 “.” 表示；
Css中写：
.special {
color: orange;
}
Html调用:
应用special样式
与类选择器不同，在一个 HTML 文档中，ID选择器仅使用一次
不同于类选择器，ID选择器不能结合使用，因为ID属性不允许有以空格分隔的多个值
ID选择器能包含更多含义，类似于类，可以独立于元素来选择ID
Search form components go here. This section of the page is unique. 用于把风格完全相同的选择器组合在一起，以得到简洁的样式表
h1, h2, .special, #intro {color: blue; font-family: Arial} * {color: red;}2.3复杂选择器 1.层次选择器
后代选择器 element element
左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）
....在...找到
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
This is a important heading解释：h1 下的em才会应用到样式
子选择器：element>element
子选择器使用大于号表示,子选择器只能选择作为某元素子元素的元素
This is very very important.
This is really very important.
解释：只有第一行的very very是红，第二行保持黑色，因为第二行的strong是作为em的子元素了，不是h1 的子元素了
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
相邻兄弟选择器使用加号(+)表示
This is a heading.
中间
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
解释：选择紧接在h1元素后出现的p段落，h1和p拥有共同的父元素body
交集选择器：element#id element.class
交集选择器是由两个选择器直接连接构成，结果是二者各自元素范围的交集。
普通效果
交集选择器效果
类选择器效果
2.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
属性选择器把所需属性列在方括号([ ])中
1.[attribute]
2.伪类选择器a[title] {color: red;} /*包含标题的所有元素变为红色 */
a[href] {color: red;} /*只对有href属性的a元素应用样式*/
a[href][title] {color: red;} /*将同时有href和title属性的a设置为红*/ a[href=“http://www.w3school.com.cn/about_us.asp”] {color: red;} /*根据具体属性值来选择该元素 */
a[href=“http://www.w3school.com.cn/”][title=“W3School”] {color: red;} /*多个属性-值选择器链接在一起选择该元素*/
伪元素也用冒号: 表示
1.链接伪类选择器
a:link 应用样式到未点击的链接
a:visited 应用样式到已点击的链接
a:hover 当鼠标悬停在链接时应用该样式，必须被置于 a:link 和 a:visited 之后
a:active 鼠标键按下之后应用该样式，必须被置于 a:hover 之后
2.伪元素选择器
首行伪元素
:first-line，该选择器在特定元素的首行应用样式规则，能应用的属性只有：color font background word-spacing letter-spacing text-decoration vertical-align text-transform line-height
首字母伪元素
:first-letter，该选择器在特定元素的首字母应用样式规则，能应用的属性只有：
color font text-decoration text-transform vertical-align background margin padding border float word-spacing letter-spacing
before伪元素
:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
after伪元素
:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
<元素>:before/after
{
content:文字/url();
}
This is a heading
The :after pseudo-element inserts content after an element.
This is a heading
body { font-family:Verdana, Arial, Helvetica, sans-serif;}
值可以是绝对或相对值
绝对值：
将文本设置为指定的大小
不允许用户在所有浏览器中改变文本大小（不利于可用性）
绝对大小在确定了输出的物理尺寸时很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器改变文本大小
绝对单位 pt：point，1pt=1/72英寸 pc：picas，1pc=1/6英寸=12pt mm：毫米 cm：厘米 in：英寸 避免 在网页样式表中使用绝对单位 相对单位 em：与当前字体尺寸相等( 即给定字体的 font-size 值 ) 的计量单位 ex：大约等于 所用 字体 中小写字母x的高度 ，浏览器实现时， 1ex=0.5em px：像素，也称作相关像素 %：百分比值3.字体粗细font-weight
属性值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit4.字体样式font-style默认值：normal
网页中大多使用的普通字体只有两个字重：正常（normal）和粗体（bold）；
数字表示法很少使用；值400对应于normal，700对应于bold，600及以上通常表示为粗体
属性值：normal （正常）| italic(斜体，为字体弯曲) | oblique（倾斜，普通字体倾斜） | inherit 继承
5.字体变量font-variant
属性值：normal | small-caps(小体大写字母 ) | inherit
默认值：normal
p {font-variant: small-caps;}用小型的大写字母替代小写字母属性值：font-style font-weight font-variant font-size/line-height font-family|inherit
font属性值是用空格隔开的，是所有字体相关属性值的列表
font属性的前三个值允许采用任意的顺序，而后两个值必须有且顺序是font-size在前，font-family在后；
不建议使用。
2.5文本属性 1.文本对齐text-align属性值：left | right | center | justify | inherit
默认值：从左到右阅读的语言为left；从右到左阅读的语言为right
th { text-align: right; }
td { text-align: center; }
p { text-align: justify; }
使文本第一行缩进具体数目的长度
属性值：长度，百分比值|inherit
默认值：0
p#1{text-indent: 2em;}
p#2{text-indent: 25%;}
p#3{text-indent: -35px;} //悬挂缩进
定义了文本中基线之间的最小距离
属性值：数值，长度，百分比|normal|inherit
默认值：normal
将行高设置为字体尺寸的两倍,以下代码
p{line-height: 2;} //数字作为当前字体尺寸要乘的比例因子
p{line-height: 2em;} //以下两行都是基于当前字体的尺寸
p{line-height: 200%;}
在显示的单词之间插入空格
属性值：长度值，normal
默认值：normal，与设置值为 0 一样
p.spread {word-spacing: 0.5em;}
p.tight {word-spacing: -0.5em;}
p.base {word-spacing: normal;}
p.norm {word-spacing: 0;}
在显示的单词之间插入空格
属性值：长度值，normal | inherit
默认值：normal，与设置值为 0 一样
h1 { letter-spacing: 6px; }
P { letter-spacing: 3px; }
属性值：none | underline下划线 | overline上划线 | line-through贯穿线 | blink闪烁效果 | inherit
h1 {text-decoration: underline; }
h2 {text-decoration: overline; }
h3 {text-decoration: line-through; }
属性值：none | capitalize首字母大写 | lowercase小写 | uppercase大写 | inherit
2.6颜色与背景 1.颜色colorh1 {text-transform: uppercase;}
属性值：颜色值（名称或数字表示）|inherit
1.颜色名称
black(黑) gray(灰) white(白) red (红) yellow(黄色) green(绿) blue (蓝)
maroon(栗) purple(紫) fuchsia(紫红) silver(银)
lime (酸橙) olive (橄榄色) navy (海军蓝) teal (水鸭绿) aqua (浅绿)
2.RGB(red green blue)函数
通过混合红、绿和蓝三色光，计算机能显示所有颜色，称为RGB颜色模型；
3.十六进制的颜色值
十六进制数由三个两位数组成，分别表示红、绿和蓝
十六进制数字系统使用16个数：0~9和A~F
4.RGBA(red green blue alpha)
alpha:指定该颜色的透明度
h1{color: gray;}
h1{color: #FF66BB;}
h1{color: #F6B;}
1.前景色color
属性值：颜色值|inherit
元素的前景由文本和边框(如果已经指定的话)组成，使用color属性指定前景色。
2.背景色background-color
属性值：颜色值|transparent|inherit
默认值：transparent透明
同时设置了背景图片和背景色，背景图片会被优先选择。
3.背景图片background-image
属性值：URL(图像位置) | none
background-image:url(image/one.png)
无论(X)HTML文档在什么位置，只要能提供图像对于根目录的相对URL，就能确保找到背景图像
对于网页，希望背景图像的文件尽可能的小
4.背景图片拼贴brckground-repeat
必须先指定background-image属性才能使用这个属性
属性值：repeat 表示仅x,y方向都重复显示图片| repeat-x 表示仅x方向重复显示图片 | repeat-y 表示仅y方向重复显示图片| no-repeat 表示仅x,y方向都不重复显示图片
默认值：repeat
5.背景位置background-position
属性值：长度计量值|百分比值| left | center | right | top 上| bottom 下
通常提供水平和垂直两个方向的值来描述原图的位置
值：left top:左上 center top:中上 right top:右上
left bottom :左下 center bottom :中下 right bottom :右下
left center:左中 center center:中间 right center:右中
6.背景附加方式background-attachment
属性值：scroll 背景图片会随着页面其余部分的滚动而滚动 | fixed 当页面的其余部分混蛋时，背景图片不会移动
7.快捷背景属性background
属性值：background-color background-image background-repeat background-attachment background-position
css背景色渐变,CSS 实现背景色渐变和文字颜色渐变
background: linear-gradient(to buttom,pink,blue); 背景从上到下颜色渐变
to left：设置渐变为从右到左.
to right：设置渐变从左到右。
to top：设置渐变从下到上。
to bottom：设置渐变从上到下。
2.7盒模型（框模型） 2. 优先级 1.继承（样式属性的元素继承）(X)HTML元素会把某些样式属性传递给它包含的元素文档结构：(X)HTML文档有隐性的结构或层次
父与子：包含在指定元素中的所有元素都被称为后代
1.属性的继承规则
不能被继承的属性：边框不可继承
可以被继承的属性：前面提到的文本属性 |inherit
font-style font-family font-size font-variant(字体变量) texttransform（大小写转换）font-weight line-height word-spacing letter-spacing text-align text-index(缩进) font
有选择性的被继承
font-size
2.层叠（样式表规则的层叠） 3.优先级特性内联样式>文档样式>外部样式>浏览器默认
内联样式 > ID选择器 > 类选择器 > 后代选择器 > 元素选择器
越特殊的样式，优先级越高
完整的层叠优先级：
内联样式>文档样式表ID派生选择器>文档样式表ID选择器>文档样式表类派生选择器>文档样式表类选择器>文档样式表>外部样式表ID派生选择器>外部样式表ID选择器>外部样式表类派生选择器>外部样式表类选择器>外部样式表>浏览器默认
样式表元素选择器选择越精确，其样式的优先级越高
对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高。
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）