CSS（1）

初识css

1.初识CSS

定义：级联样式表

作用：修饰网页（不是网页必须的）

修饰效果的种类：字体大小，颜色，高度，宽度等

2.CSS应用

一般用于对网页的效果进行修饰（美化）的工作

3.CSS的发展史

1996年CSS1.0

2010年CSS3.0

4.CSS的优势

（1）内容和表现分离

HTML和CSS应用可以使代码变得简洁

（2）网页的表现统一，容易修改

（3）丰富的样式，使得页面布局更加灵活

（4）减少网页的代码量，增加网页的浏览速度，节省网络带宽

（5）运用独立于页面的CSS，有利于网页被搜索引擎收录

独立于HTML页面，可变为CSS样式库（以后可以直接引入别人写好的）

5.CSS基本语法结构

选择器{

    属性名1：属性值；

    属性名2：属性值；

    }

特点：

（1）选择器包含基本选择器和高级选择器，用来获取html

（2）{}代表语法体，用来存放CSS代码

（3）属性名一般都css中的语法

（4）属性值一般是属性的内容或是范围

（5）基于W3C标准不建议省略

6.style标签

特点：

（1）使CSS的代码在网页中生效

（2）type="text/css"代表告诉浏览器当前style标签中的代码是CSS代码（CSS生效）

引入CSS的3种样式

1.行内样式

<p style="background：deepskyblue；color：white；"></p>

特点：在HTML标签行中引入style属性，并对属性名设置属性值，或者对多个属性名设置多个属性值

2.内部样式表

<style type="text/css">

       p{

               background：deepskyblue；

               color：white；

        }

特点：在head标签中引入<style>标签，type="text/css"代表告诉浏览器style标签中的是CSS代码

3.外部样式

<link rel="stylesheet"  type="text/css"  href="css/common.css"/>

特点：

（1）利用link标签

（2）Rel="stylesheet"代表使用外部样式表

（3）Type="text/css"告诉浏览器文件中的代码是css代码

（4）Href="css/common.css"代表当前html页面引入的是css路径下的common.css文件

4.CSS样式优先级

（1）行内样式>内部样式表>外部样式表

（2）就近原则（里HTML越近，生效的可能性越大）

基本选择器

1.标签选择器

<style type="text/css">

特点:

（1）使CSS的代码在网页中生效

（2）type="text/css"代表告诉浏览器当前style标签中的代码是CSS代码（CSS生效）

2.类选择器

.class{font-size：16px}

3.id选择器

#id{color：orange}

特点：

（1）在html中定义id属性

（2）在CSS中使用#id属性值

高级选择器

1.层次选择器

（1）后代选择器

div p{ background-color：yellow；}

定义：选择div标签内所有p元素

P标签：文本段落

Div标签（块级元素）：结构区域、块、框

（2）子选择器

div>p{ background-color：yellow；}

定义：选择所有父级是<div>元素的<p>元素

（3）相邻兄弟选择器

div+p{ background-color：yellow；}

定义：选择所有紧接着<div>元素之后的第一个<p>元素

（4）通用兄弟选择器

div~p{ background-color：yellow；}

定义：选择所有紧接着<div>元素之后的所有<p>元素

2.结构伪类选择器

p：first-child{  }

p：last-child{  }

特点：

（1）常用的结构伪类选择器的种类：<1>:first-child  <2>:last-child

（2）匹配某元素的辅元素的第一个或是最后一个某元素

（3）利用特殊字符冒号（：）模拟类选择器的作用实现第一个或是最后一个的元素标签

3.属性选择器

（1）E[attr]

a[target]{ background：red；}

定义：选择匹配具有属性attr的E元素

target="_black":开辟新的选项卡

target="_self"：对原来的选项卡进行替换

（2）E[attr=val]

a[target=_blank]{ color：green；}

定义：选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

（3）E[attr^=val]

a[class^="a"]{color：yellow；}

定义：选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

（4）E[attr$=val]

定义：选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

a[class$="e"]{color：burywood；}

（5）E[attr*=val]

a[class*="e"]{color：red；}

定义：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配