[学习笔记] 静态网页开发基础之初识CSS3

# 学习 # · 2020-04-13

CSS概述

1、层叠样式表(Cascading Style Sheet):又称为风格样式表(Style Sheet),它是用来进行网页风格设计的。

2、CSS在网页中的应用:通过设立样式表,可以统一地控制HTML中各标签的显示属性。设置文本居中显示,文本与图片的对齐方式,超链接的不同效果,更有效地控制网页外观。

3、CSS的优势:

(1)内容与表现分离,便于后期CSS样式的维护。

(2)表现的统一。

(3)丰富的样式,使得页面布局更加灵活。

(4)减少网页的代码量,提高网页的浏览速度,节省网络带宽。

(5)运用独立于页面的CSS,还有利于网页被搜索引擎收录。


CSS3的基本语法

1、基本语法结构:

(1)CSS规则由两部分构成,即选择器和声明。

(2)声明必须放在大括号({})中,并且声明可以是一条或多条。

(3)每条声明由一个属性和值组成,属性和值用冒号分开,每条语句以英文分号结尾。基于W3C标准规范考虑,建议最后一条声明的结束“;”都要写上。

2、style标签:

<head lang="en">
    <meta charset="UTF-8">
    <title>style标签</title>
    <style>
        h1{
            font-size:12px;
            color:#F00;
        }
    </style>
</head>

在HTML中引入CSS样式:

1、行内样式:在HTML标签中直接使用style属性设置CSS样式。但不能使内容与表现相分离,本质上没有体现出CSS的优势,因此不推荐使用。

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

2、内部样式表:方便在页面中修改样式,但不利于在多页面间共享复用代码,以及页面的维护,对内容与样式的分离也不够彻底。

3、外部样式表:

(1)链接外部样式表:

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

(2)导入外部样式表:

<style>
    @import url("common.css"):
</style>

4、链接式与导入式的区别:

(1)<link/>标签属于XHTML范畴,而@import是CSS2.1中特有的。

(2)使用<link/>链接的CSS是客户浏览网页时先将外部CSS文件加载到网页中,再进行编译显示,所以这种情况下显示出来的网页与用户预期的效果一样,即使网速再慢也是一样的效果。

(3)使用@import导入的CSS文件,客户端在浏览网页时先将HTML结构呈现出来,再把外部CSS文件加载到网页中,当然最终的效果与使用<link/>链接文件效果一样,只是当网速较慢时会先显示没有CSS统一布局的HTML网页,这样就会给用户很不好的感觉。这也是目前大多数网站采用链接外部样式表的主要原因。

5、样式优先级(就近原则):行内样式>内部样式>外部样式表


CSS3的选择器

1、CSS3的基本选择器:

(1)标签选择器:每种HTML标签的名称都可以作为相应的标签选择器的名称。

h3 {
    color: #090;
}

(2)类选择器:类选择器在同一个页面中可以频繁的使用(以.来调用)。

.green {
    font-size: 20px;
    color: green;
}

(3)ID选择器:同一个id属性在同一个页面中只能使用一次(以#来调用)。

#first {
    font-size: 16px;
}

(4)三种基本选择器的优先级:ID选择器>class类选择器>标签选择器

2、CSS3的高级选择器:

(1)层次选择器:是通过HTML文档的对象模型(Document Object Model,DOM)元素间的层次来选择元素的。

/*后代选择器*/
E F 
body p{
    background: red;
}

/*子选择器*/
E>F
body>p{
    background: pink;
}

/*相邻选择器*/
E+F
active + p{
    background: green;
}

/*通用兄弟选择器*/
E~F
.active~p{
    background: yellow;
}

(2)结构伪类选择器:所有的结构伪类都是基于HTML文档树的,也称为文档对象模型(DOM),文档树(Document Tree)是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元素

/*ul的第一个子元素*/
ul li:first-child{
    background: red;
}

/*ul的最后一个子元素*/
ul li:last-child{
    background: green;
}

/*body下面的第2个p元素*/
p:nth-child(2){
    background: yellow;
}

/*选择到父级里的第一子元素p*/
p:nth-child(1){
    background: yellow;
}

/*父元素里第2个类型为p的元素*/
p:nth-of-type(2){
    background: blue;
}

(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与属性值中的
任意位置相匹配。

/*存在属性id的元素*/
a[id] {
    background: yellow;
}

/*属性id=first的元素*/
a[id=first] {
    background: red;
}

/*属性class="links"的元素*/
a[class="links"] {
    background: red;
}

/*属性class里包含links字符串的元素*/
a[class*=links] {
    background: red;
}

/*属性href里以http开头的元素*/
a[href^=http] {
    background: red;
}

/*属性href里以png结尾的元素*/
a[href$=png] {
    background: red;
}
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/258/

评论