HTML5中初识CSS3重点总结

什么是CSS?

CSS——层叠(级联)样式表(Cascading Style Sheet):表现HTML或XHTML文件样式的计算机语言【包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定】

 

CSS的优势:

  1. 内容与表现分离
  2. 网页的表现统一,容易修改
  3. 丰富的样式,使页面布局更加灵活
  4. 减少网页的代码量;增加网页的浏览速度,节省网络带宽
  5. 运用独立于页面的CSS ,有利于网页被搜索引擎收录

 

CSS基本语法结构:

一、选择器

选择器 {

属性:值;

属性:值;

    ……  }

谁选择用这个样式

大括号“{}”和分号“;”必须写!

font-size:字体大小

color:字体颜色

CSS的最后一条声明后的“;”可写可不写,但是,基于W3C标准规范考虑,建议最后一条声明的结束“;” 都要写上

二、style标签

<style type="text/css">

h1 {

       font-size:12px;

       color:#F00;

}

</style>

 

三、HTML中引入CSS样式

1. 行内样式:【特定的某一个标签】

使用style属性引入CSS样式

<p style="……"></p>

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

弊端:

  1. 看起来不明显
  2. 表象和样式揉在一起了

 

2. 内部样式表:

CSS代码写在<head>的<style>标签中

<style>

    h1{color: green; }

</style>

样式的作用范围只是本页面

优点:方便在同页面中修改样式

缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底

 

3. 外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式

  1. 链接式
  2. 导入式

先创建一个外部的css文件:*.css

然后把样式写在这个文件中

谁想用这个样式,谁就引入这个css文件即可

1. 链接式

<link rel="stylesheet" href="样式文件的路径"/>

 

2. 导入外部样式表

<head>

……

<style type="text/css">

<!--@import url("style.css");-->

</style>

</head>

 

链接式与导入式的区别:【推荐使用link】

  1. <link/>标签属于XHTML,@import是属于CSS2.1
  2. 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
  3. 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
  4. @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
  5. 综上所述推荐使用<link/>标签

 

4. CSS样式优先级

  1. 行内样式 > 内部样式表 > 外部样式表
  2. 就近原则先是行内,再是内部再外部

 

CSS3基本选择器:

1. 标签选择器

选择器写法和标签是一致的。所有的这些标签会使用统一的样式

如:<h1>…<h6>、<p>、<img>

2. 类选择器

<标签名 class= "类名称">标签内容</标签名>

.red【声明的时候要有点】{

              color:#ff0000;

}

<h1></h1>

<h1 class="red" ></h1>

<p></p>

<p class="red" ></p>

 

3. ID选择器

#green【声明的时候要有点】{

color:#00ff00;

}

<h1></h1>

<h1 id="green" ></h1>

<p></p>

<p class="red" ></p>

4. 小结

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

网页中的元素id必须唯一,Id只能使网页中的一个元素使用这个样式

 

5. 基本选择器的优先级

ID选择器>类选择器>标签选择器

标签选择器是否也遵循“就近原则”?

不遵循,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

 

CSS的高级选择器:

1. 层次选择器

选择器

类   型

功能描述

E F

后代选择器

选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内

E>F

子选择器

选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素

E+F

相邻兄弟选择器

选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面

E~F

通用兄弟选择器

选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素

①后代选择器

body p{  background: red;  }

图中所有p都变红

后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入

②子选择器

body>p{  background: pink;  }

图中所有只有p1、p2、p3变粉

③相邻兄弟选择器

.active+p {  background: green;  }

图中所有只有p2变绿

④通用兄弟选择器

.active~p{  background: yellow;  }

图中所有只有p2、p3变黄

 

2. 结构伪类选择器

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>使用CSS3结构伪类选择器</title>

</head>

<body>

     <p>p1</p>

<p>p2</p>

<p>p3</p>

    <ul>

        <li>li1</li>

<li>li2</li>

<li>li3</li>

    </ul>

</body>

</html>

 

选择器

功能描述

E:first-child

作为父元素的第一个子元素的元素E

E:last-child

作为父元素的最后一个子元素的元素E

E F:nth-child(n)

选择父级元素E的第n个子元素F,(n可以是1、2、3),

关键字为even、odd主要用在隔行变色

E:first-of-type

选择父元素内具有指定类型的第一个E元素

E:last-of-type

选择父元素内具有指定类型的最后一个E元素

E F:nth-of-type(n)

选择父元素内具有指定类型的第n个F元素

例如:

p:first-child{ background: red;}  【找父集里面第一个子元素的p元素】

第一个p标签变成红色

ul(或者写class名)li:first-child{ background: red;}

第一个li标签变成红色

ul(或者写class名)li:last-child{ background: red;}

最后一个li标签变成红色

ul(或者写class名)li:nth-child(2){ background: red;}

第二个li标签变成红色

p: first-of-type{ background: blue;}  【找父集里面第一个类型是p子元素】

第一个p标签变成蓝色

注:如果body里加上<h2>结构伪类选择器</h2> 此时p:first-child{ background: red;}就会不管用了,因为第一个元素不是p元素。

 

ul li:first-child{ background: red;}

ul li:last-child{ background: green;}

p:nth-child(1){ background: yellow;}

p:nth-of-type(2){ background: blue;}

运行结果:

使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点:

  1. E F:nth-child(n)在父级里从一个元素开始查找,不分类型
  2. E F:nth-of-type(n)在父级里先看类型,再看位置

 

3. 属性选择器

属性选择器

功能描述

E[attr]

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

E[attr=val]

选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)

E[attr^=val]

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

E[attr$=val]

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

E[attr*=val]

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

 

E[attr]属性选择器:

a[id] { background: yellow; }

凡是id属性的都会变成黄色

 

E[attr=val]属性选择器:

a[id=first] { background: red; }

E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中

凡是id属性并且属性值是first的都会变成红色

 

E[attr^=val]属性选择器:

a[href^=http] { background: red; }

凡是href属性,并且以http开头的都会变成红色

 

E[attr$=val]属性选择器:

a[href$=png] { background: red; }

凡是href属性,并且以png结尾的都会变成红色

 

E[attr*=val]属性选择器:

a[class*=links] { background: red; }

凡是class属性,并且包含links这个属性值的都会变成红色(linksitem也算在其中)

 

HTML中颜色的表示:

  1. 使用英文单词:red,yellow,green,blue… 
  2. 实用十六进制的数字表示0-9 A B C D E F

RGB=Red  Green  Blue

#00    ff     00   绿色

#ff     00    00   红色

总结:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值