css简介

css介绍

css简介
CSS:层叠样式表(Cascading Style Sheets)装饰页面
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低的

css可以分别为网页的各个层次设置样式。
优势:内容与表现分离
网页的表现统一，容易修改。
丰富的样式，使得页面布局更加灵活。
减少网页的代码量，增加网页的浏览速度，节省网络带宽。
运用独立于页面的CSS，有利于网页被搜索引擎搜录。

基本语法
CSS由两个主要的部分构成：选择器，以及一条或多条声明。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来：
p {color:red;text-align:center;}
为了让CSS可读性更强，你可以每行只描述一个属性。

p{color:red; text-align:center;}
p{
text-align:center;
color:black;
font-family:arial;}

1.text-align:设置文本水平对齐方式，常用值：
left right center
2.line-height:设置文本行高属性
3.text-indent：设置文本首行缩进
4.text-decoration:设置文本装饰
常用属性：none 默认值：标准 （常用在超链接设置，超链接默认属性是text-decoration：underline）
underline：设置文本下划线
overline:设置文本上划线
line-through：设置文本删除线
background-image: url(…/image/1.jpg)插入背景图片链接（url）
link未访问链接
visited已访问链接
hover鼠标移动到链接上
active鼠标点击时
a:link{color: black}
.ul1{list-style-type: circle;}空心圆圈
square方形
none实心圆圈
图像作为列表项标记
.ul4{list-style-image: url(…/image/arrow-icon.gif);}
nav{
width: 960px;宽度
margin: 0px auto;页面边距
border: 1px red solid;框宽度
}
nav ul li{
display: inline-block; 陈列行内块
width: 120px;宽度
}

类选择器：就是给要添加样式的标签加上一个类名，关键字class
用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
在HTML中以class属性表示，在CSS中类选择器以一个点"."符号显示。

语法：.类名（例如:.class1{..}）

并集选择器:创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
或者理解成将多个相同样式定义的选择器以逗号进行分组。
语法：选择器，选择器，选择器{}
多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边
即右边的选择器只能在左边的选择器范围内选择
子代选择器和后代选择器很像，不过只选择匹配元素中的直接后代
目标元素为匹配第一个选择器的元素的直接后代,且匹配第二个选择器
用于选择指定标签元素的第一代子元素
语法：第一个选择器>第二个选择器

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

1
1
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
动态伪类选择器：根据条件的改变匹配元素，是相对于文档的固定状态来说的
属性选择器:对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

内部样式:当单个文档需要特殊的样式时，就应该使用内部样式表。
你可以使用

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
style 属性可以包含任何 CSS 属性。
也可以多重样式重叠

外部样式表:当样式需要应用于很多页面时，外部样式表将是理想的选择
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。

每个页面使用<link>标签链接到样式表。link标签在文档的头部

1
1
浏览器会从文件style.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。
文件中不能包含任何的HTML标签。
样式表应该以.css扩展名进行保存

注意
pop方法是将数组中的最后一个元素删除，返回的结果是被删除的元素，使用方法的名称是pop（）