一、（2）CSS入门基础与选择器

CSS入门基础与选择器

一、CSS介绍（了解）

1. 关于WEB标准

WEB标准不是某一个标准，而是一系列标准的集合。
网页主要由四部分组成：内容（Content）、结构（Structure）、表现（Presentation）和行为（Behavior）。

1）内容：就是制作者放在页面内真正想要让访问者浏览的东西，如：图片、文本、多媒体等（内容为王）
2）结构：使内容更加更加具有逻辑性与易用性，更清晰易懂
3）表现：用于修饰内容的外观的样式，称为表现，使网页更加美观
4）行为：网页中的交互及操作效果，主要通过脚本语言完成事件+动作

对应的标准有三方面：

结构化标准语言主要包括HTML、XHTML和XML，
表现标准语言主要包括CSS，
行为标准主要包括对象模型 W3C DOM、JavaScript、ActionScript等。

WEB标准的目的：
创建一个统一的用于Web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示统一的信息内容。

结构 HTML / XHTML / XML
样式 CSS
行为 JavaScript

2. 什么是CSS

　　CSS是Cascading Style Sheets的简写，即层叠样式表，简称样式表。

3. CSS的主要作用

1. 遵循W3C标准，符合WEB2.0标准。
2. 减少重复格式化，减少网页体积，加快下载和访问速度。
3. 符合内容与表现形式分离的原则，方便于搜索引擎抓取到有用的内容。
4. 便于更新和维护，成千上万的网页只需要修改CSS便可以更改显示外观。
5. 浏览器干扰相对较小，实现一些HTML格式化不能实现的高级功能。

4. CSS3介绍

4.1 CSS3与HTML5关系
Html5是新一代HTML标准；
Css3是新一代Css标准；
其实虽然两者都是最新标准，但是并没有直接的关系，HTML5用来进行网页的结构编写，CSS3是网页的样式。

如果非要让两者发生关系： “相辅相成”。
两者可以随意组合比如：html4+css3 html5+css2 html5+css3。
4.2 CSS3兼容性
CSS3是由W3C制定的标准，浏览器对CSS3进行功能实现，所以对于某些同样的样式在不同的浏览器运行结果会不一致，兼容性问题随之产生。
一般支持HTML5的浏览器，都支持CSS3；通过CSS3画“机器猫”的效果检查浏览器是否对CSS3良好支持；

4.3 CSS3新特性
CSS 用于控制网页的样式和布局，CSS3加入了很多的新特性，开发人员使用这些新特性让开发变得更简单，页面变得越来越漂亮。

CSS3被拆分为若干的"模块"，还增加了新的。一些最重要CSS3模块如下：

选择器
文字颜色特效
背景和边框
盒子模型
布局
过渡
动画
2D/3D转换

二、CSS的基本语法（重点）

1. 第一个CSS样式

需求：网页中显示“源码时代教育机构”，并且对文本设置为红色、加粗、改变字体大小。
方案1：不使用使用CSS的写法：

<font size="6" color="red"><b>教育机构</b></font>
方案2：使用CSS的写法：
<!--
所有的标签都有style属性, 这个属性代表的就是修改当前这个元素的样式
颜色 color: red;
加粗font-weight: bold;
字体大小font-size: 24px;
-->
<span style="font-size:30px; font-weight:bold; color:red;">机构</span>

2. CSS的语法结构

CSS的定义是由三个部分构成：选择器（selector），属性（properties）和属性的取值（value）

选择器名称
{
属性名称1：属性的值1；
属性名称1：属性的值1；
……
}

注意事项：
1.在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的，CSS注释以"/*" 开头，以"*/" 结尾。
2.定义多个值时，浏览器按照从前向后顺序选择属性值。如果第1个值有效，则尝试使用，如果无效，则使用第2个，依次类推。如：font-family: 'arial black', '微软雅黑';

CSS样式一般放到HTML的head标签中，写在成对的<style>标签中，标签可以设置一个type属性并设置值为text/css，目的是告诉浏览器<style>标签中的内容是css样式。比如：以下样式定义了一个新闻标题的样式，分别对字体、字号、粗体字进行了定义。

<html>
<head>
…..
<style type="text/css">
.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 24px;
}
</style>
</head>
……
</html>
3. CSS的三种引用方式（重点中的重点）
使用CSS有三种方式： 内联式CSS、 内部式CSS 、外链式CSS
3.1 内联式CSS
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻网页</title>
</head>
<body>
<p style="font-family: '微软雅黑'; font-weight: bold; font-size: 24px; ">新闻标题</p>新闻正文
</body>
</html>

3. 内部式CSS

在HTML文档的<HEAD>标记中插入一对<STYLE>...</STYLE>标签。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body>
<p class="NewsTitle">新闻标题</p>新闻正文
</body>
</html>

4. 外链式CSS

 先建立外部样式表文件（*.css），然后在HTML中使用的link标签将其引入到网页中。
外部news.css文件

.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 24px;
}
    新闻网页文件news.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻网页</title>
<link rel="stylesheet" type="text/css" href="news.css"/>
</head>
<body>
<p class="NewsTitle">新闻标题</p>新闻正文
</body>
</html>

三、CSS选择器的类型（重点）

1. 什么是选择器？

在CSS 中，选择器是一种匹配模式，用于选择需要添加样式的目标对象。
注：行内样式不需要用选择器，内部或外部CSS需要用选择器。

2. 选择器的语法

基本格式如下： 
selector {property: value} 
选择器 {属性：值}
选择器名称
{
属性名称1：属性的值1；
属性名称2：属性的值2；
属性名称3：属性的值3；
……
}

3. 基本选择器（重点中的重点）

3.1通用选择器

* 星号选择器，也称为通用选择器
作用：选择HTML页面上所有的元素
语法：
*{ 样式表 }

通用选择器一般我们不会使用，因为它会对页面上所有的元素的样式进行渲染，这样就会使页面的渲染速度变慢。

3.2 标签(元素)选择器

必须是HTML语法中固有的标签，而不能使自己定义的名称。

作用：选择HTML网页中所有指定的标签，并对其应用样式
语法：
标签{ 样式表 }

3.3 类选择器（重点）
所有的HTML标签都有class属性，为这个class设定一个值，然后就可以使用类选择器来匹配这一个值。并对其应用样式。

作用：选择指定了class属性值的标签
语法：
.类的值{ 样式表 }

注意：使用类选择器必须在值的前面加一个点符号（.）

3.4 ID选择器（重点）

所有的HTML标签都有一个id属性
我们可以为这个id设定一个值，然后再写选择器来匹配这一个值

作用：选择指定的ID属性值的标签
语法：
#ID的值{ 样式表 }

id使用的 # ，class 使用的是 .
通常id是唯一的（只能够有一个元素来匹配）

4. 层次选择器（重点中的重点）

层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系。

1.后代选择器(包含选择器)
　　后代选择器可以选到当前标签的子元素和后代元素
样式如下：
父元素 后代元素{样式}

2.子选择器
　　自选诶器只能找到当前标签的子元素
样式如下：
父元素>子元素{样式}

4.1 包含选择器E1 E2（后代关系）

作用：选择所有被E1包含的E2。
语法：
E1 E2
示例：
table td { font-size:14px; } 
div .sub a { font-size:14px; }

4.2 子选择器 E1>E2（父子关系）(重点)

作用：选择所有作为E1子对象的E2。
语法：
E1 > E2
示例：
body > p { font-size:14px; }

注意：子选择器与包含选择器有区别，子选择器只选中下一代，包含选择器可以选中所有的后代（不限层级）。
4.3 选择器分组 E1,E2,E3（并列关系）(重点)

作用：将同样的样式应用于多个选择器，可以将选择符以逗号分隔的方式并为组。
语法：
E1,E2,E3
示例：
.td1,div a,body { font-size:14px; }

4.4 相邻选择器E1+E2（邻居关系）(了解)
选择紧贴在E1元素之后E2元素。相邻选择符只会命中符合条件的相邻的兄弟元素。

示例：
<style>
p + p {
color: #f00;
}
</style>
<div class="test">
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
</div>

说明：如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；
4.5兄弟选择器E1~E2（兄弟关系）(了解)
选择E1元素后面的所有兄弟元素E2。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

5. 伪类选择器(HTML标签的一种状态)

类选择器的四种状态“link（未点击的链接）”、“visited（访问过的链接）”、“hover（鼠标悬停的链接）”、“active（激活的链接）”。

CSS3的伪类选择器可以分成六种：

1. 动态伪类选择器
2. 目标伪类选择器
3. 语言伪类选择器
4. UI状态伪类选择器
5. 结构伪类选择器
6. 否定为类选择器。

伪类选择器语法：

E:伪类{
property：value
}

5.1动态伪类选择器

选择符	版本	描述
E:link	CSS1	设置超链接a在未被访问前的样式
E:visited	CSS1	设置超链接a在其链接地址已被访问过时的样式
E:hover	CSS1/2	设置元素在其鼠标悬停时的样式
E:active	CSS1/2	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
E:focus	CSS1/2	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式


示例：
/* 按规则的写法 */
a:link{color:black;text-decoration: none;}
a:visited{color:black;text-decoration: none;}
a:hover{color:red;text-decoration: underline;font-size:30px;}
a:active{color:black;text-decoration: none;}

/* 通常我们是这样写的：*/
a:link,a:visited{color:black;text-decoration: none;}
a:hover{color:red;text-decoration: underline;font-size:30px;}

/* 常见用法：将所有的a标签的状态都修改成下面的样子*/
/* 或者：将所有的a标签的状态都修改成下面这样 */
a{color:black;text-decoration: none;}
/* 当鼠标称上来的状态我们进行单独的修改 */
a:hover{color:red;text-decoration: underline;font-size:30px;}

注意：

1）:active 这个伪类现在已经不常用了。
2）:hover状态必须写在最后
3）Link visited hover active

a.red:link class等于red的a元素
a.red:visited class等于red的a元素
a.red:active class等于red的a元素
a.red:hover class等于red的a元素

注意：
a.red 表示交集选择器，表示选中一堆a标签中带有class=”red”的标签

简化：

a.red:link, a.red:visited
a.red:hover

最精简：

.red
.red:hover

实例如下：

<style type="text/css">
.red
{
color:#666666;
text-decoration: none;
}
.red:hover
{
color:#ff3300;
text-decoration: underline;
}
</style>

<a href="# " class="red">我是超链接的文本</a>
5.1.2 E:focus 焦点
　　设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
实例如下：

input:focus {
background: #f6f6f6;
color: #f60;
border: 1px solid #f60;
outline: none;
}

5.2目标伪类选择器(了解)
目标伪类选择器“：target”是众多实用的CSS3特性中的一个，用来匹配文档（页面）的URI中某个标志符的目标元素。URI中的标识符通常会包含一个#号，后面带有一个标识符名称，例如#contact:target就是用来匹配ID为contact的元素被URI选中时候的样式的，:target伪类选择器选取链接的目标元素，然后供定义样式。
E:target { 样式表}
示例：

div{
　　background:#ccc;
　　width:300px;
　　height:100px;
　　display:none;
}
div:target{
　　color:#f00;
　　border:1px solid #f00;
　　display:block;
}

<a href="#box1">网站首页1</a>
<a href="#box2">网站首页2</a>
<a href="#box3">网站首页3</a>

<div id="box1">内容1</div>
<div id="box2">内容2</div>
<div id="box3">内容3</div>

6. 属性选择器(了解)

选择符	版本	描述
E[att]	CSS2	选择具有att属性的E元素
E[att="val"]	CSS2	选择具有att属性且属性值等于val的E元素
E[att~="val"]	CSS2	选择具有att属性且属性值为一个用空格分隔的字词列表，其中一个等于val的E元素
E[att\|="val"]	CSS2	选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择
E[att^="val"]	CSS3	选择具有att属性且属性值为以val开头的字符串的E元素
E[att$="val"]	CSS3	选择具有att属性且属性值为以val结尾的字符串的E元素
E[att*="val"]	CSS3	选择具有att属性且属性值为包含val的字符串的E元素

6.1 E1[attr]
选择具有attr属性的E1
示例：
/* 所有具有title属性的div标签 */
div[title] { color: blue; }

6.2 E1[attr=value]
选择具有attr属性且属性值等于value的E1 
示例：
span[class=demo] { color: red; }

四、CSS的继承与优先级（重点）

1. CSS的继承特性

HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。
HTML中，<body>是其他元素的容器，是其他元素的最外层元素，所以<body>元素中定义的样式将影响其他所有元素的显示格式。

能被继承的CSS属性：

文本相关的属性是继承的
text-align、color、text-indent、font-family、font-size
font-style、font-weight、 letter-spacing、word-spacing
text-transform、line-height等

列表相关的属性是继承的
list-style、 list-style-image、list-style-position、list-style-type

ul{
list-style-type: none;
}
/* 没有定义时内外层的列表都不显示符号 */
#inner li{
list-style-type: circle;
}
<ul id="out">
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
<li>列表内容4</li>
<li>列表内容5</li>
<ul id="inner">
<li>内层列表1</li>
<li>内层列表2</li>
<li>内层列表3</li>
<li>内层列表4</li>
</ul>
</ul>

2. CSS的优先级（重点中的重点）

选择器优先级：
　　!important(按空格加在属性后面) > 行内样式 > (#id)选择器 > (.class)类选择器 > 标签选择器 > (*)通用选择器 > 继承 > 默认
在选择器优先级相同的情况下，我们参照就近原则

选择器权值计算方法(面试题)

在css当中有多种选择器，它们的权值是不同的,总权值越高,优先显示.
权值算法:

①　行内样式值为:1000
②　ID选择器为:100
③　类选择器为:10
④　标签和伪元素选择器为:1

#mainbox .title p{} 权值为:111
#content .newsbox .title ul li 权值为:122

posted @ 2020-12-11 13:14 全村的希望、阅读(257) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码