CSS入门知识

最新推荐文章于 2024-06-17 22:09:44 发布

就像风1样

最新推荐文章于 2024-06-17 22:09:44 发布

阅读量222

点赞数

分类专栏： css CSS样式专栏

本文链接：https://blog.csdn.net/qq_42221334/article/details/84870658

版权

css 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

CSS样式专栏

21 篇文章 1 订阅

订阅专栏

1. CSS 入门知

1.1 关于 Web 标准

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

1) 内容：就是制作者放在页面内真正想要访问者浏览的东西，如：图片、文本、多媒体等
（内容为王）。
2) 结构：使内容更加具有逻辑性和易用性，更清晰易懂。

3) 表现：用于修饰内容的外观的样式，称为表现，使网页更加美观。
4) 行为：网页中的交互及操作效果，主要通过脚本语言完成事件和动作。

对应的标准有三方面：
结构化标准语言主要包括 HTML、XHTML 和 XML，
表现标准语言主要包括 CSS，
行为标准主要包括对象模型 W3C DOM、Javascript、ActionScript、ECMAScript 等。

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

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

1.2 什么是 CSS

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

1.3 CSS 的主要作用

1) 遵循 W3C 标准，符合 Web2.0 标准。
2) 减少重复格式化，减少网页体积，加快下载和访问速度

3) 符合内容与表现形式分离的原则，方便于搜索引擎抓取到有用的内容。
4) 便于更新和维护，成千上万的网页只需要修改 CSS 便可以更改显示外观。

5) 浏览器干扰相对较小，实现一些 HTML 格式化不能实现的高级功能。

2. CSS 的基本语法

2.1 第一个 CSS 样式

需求：网页中显示“咕泡学院新前端学习指南”，并且对文本设置为红色、加粗、改变字体大
小。
方案一：不使用 CSS 的写法：（font 标签已经被废弃）

<font size="36" color="red"><b>咕泡学院新前端学习指南</b></font>
方案二：使用 CSS 的写法：

<span style="font-size: 36px;font-weight: bold;color:red">咕泡学院新前端学习指南</span>

2.2 CSS 的语法结构

CSS 的定义是由三个部分构成：选择器（selector），属性（properties）和属性的取值（value）
选择器名称
{
属性名称 1：属性值 1；
属性名称 2：属性值 2；
……
}

注意事项：

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

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

号，粗体字进行了定义。
<!DOCTYPE html>
<html lang="en">
<head>

……
<style type="text/css">
.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 36px;
}
</style>
</head>
……
2.3 CSS 的三种引入方式

使用 CSS 有三种方式：内联式 CSS、内部式 CSS、外链式 CSS

2.3.1 内联式 CSS
内联式，也称行内式；即是在对象的标记内使用对象的 style 属性定义适用该标签的样式表
属性。

<span style="font-size: 36px;font-weight: bold;color:red">咕泡学院新前端学习指南</span>

2.3.2 内部式 CSS
在 HTML 文档的<HEAD>标记中插入一对<style>……</style>标签。
<!DOCTYPE html>
<html lang="en">
<head>
…… <style type="text/css">
.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 36px;
}
</style>
</head>
……

2.3.3 外链式 CSS
先建立外部样式表文件（*.css），然后在 HTML 中使用 link 标签将其引入到网页中。
外部 news.css 文件
.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 36px;
}

新闻网页文件 news.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
……
<link rel="stylesheet" type="text/css" href="news.css" />
</head>
……

3. CSS 选择器的类型

3.1 什么是选择器？
在 CSS 中，选择器是一种匹配模式，用于选择需要添加样式的目标对象。
注：内联式（行内样式）不需要用选择器，内部式和外部式要用选择器。

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

.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 36px;
}
3.3 基本选择器（元素选择符）
3.3.1 类选择器

所有的 HTML 标签都有 class 属性，为这个 class 设定一个值，然后就可以使用类选择器来匹
配这个值。并对其应用样式。
作用：选择指定了 class 属性值的标签
语法：
.类的值{ 样式表 }
示例：

.NewsTitle
{
font-family: "微软雅黑";
font-weight: bold;
font-size: 36px;
}
3.3.2 ID 选择器
所有的 HTML 标签都有一个 id 属性。
我们可以为这个 id 设定一个值，然后再写选择器来匹配这个值。

作用：选择指定的 ID 属性值的标签。
语法：
#ID 的值{ 样式表 }
示例：
/* 如果要对应 id 的属性，需要在前面加上一个# */
#mydiv{
color:red;
}
Id 使用的#，class 使用的是.
通常 id 是唯一的（只能够有一个元素来匹配）

3.3.3 标签（元素）选择器
必须是 THML 语法中固有的标签，而不能是自定义的名称。
作用：选择 HTML 网页中所有指定的标签，并对其应用样式
语法：标签{ 样式表 }
示例：
h1 {
color: blue;
}
input{
width: 320px;
}
3.3.4 通用选择器

*星号选择器，也称为通用选择器
作用：选择 HTML 页面上的所有的元素
语法：
*{ 样式表 }
示例：
/* 通用选择器 */
*{
color: yellow;
}
通用选择器一般我们不会使用，因为它会对页面上所有的元素的样式进行渲染，这
样就影响浏览器的渲染速度。
早期使用*选择器来清楚浏览器默认的 margin 和 padding（现在不建议使用此方
法）。

3.4 复合选择器（关系选择符）
3.4.1 包含选择器 E1 E2（后代关系）
作用：选择所有被 E1 包含的 E2。
语法：
E1 E2
示例：
table td { font-size: 14px; }
3.4.2 子选择器 E1 > E2（父子选择关系）
作用：选择所有作为 E1 子对象的 E2。
语法：

E1 > E2
示例：
body > p {font-size: 16px }
注意：子选择器与包含选择器有区别，子选择器只选中下一代，包含选择器可以选中所有的
后代（不限层级）。
3.4.3 选择器分组 E1,E2,E3（并列关系）
作用：将同样的样式应用于多个选择器，可以将选择符以逗号分隔的方式并为组。
语法：E1,E2,E3

示例：
td,div a,body{ font-size: 16px; }
3.4.4 相邻选择器 E1+E2（邻居关系）
选择紧贴在 E1 元素之后的 E2 元素。相邻选择符只会命中符合条件的相邻的兄弟元素。

</style>
</head>
<body>
<div class="NewsTitle">
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
<p>这是一个文字段落</p>
<h3>这是一个标题</h3>
<p>这是一个文字段落</p>
</div>

3.4.5 兄弟选择器 E1~E2（兄弟关系）
选择 E1 元素后面的所有兄弟元素 E2。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而强制是紧邻的元素。
3.5 属性选择器
3.5.1 E1[attr]
选择具有 attr 属性的 E1
示例：

/* 所有具有 title 属性的 div 标签 */
div[title]{ color:blue }
3.5.2 E1[attr=value]
选择具有 attr 属性且属性值等于 value 的 E1
示例：
span[class=demo]{ color:red }
3.6 伪类选择器
3.6.1 鼠标的四种状态（重点）

作用：<a>标记，超链接有 4 种不同的状态：未访问链接（link）、鼠标悬停状态（hover）、
已访问的链接、当前点击的活动链接（active）。CSS 允许对于元素的不同状态，定义不同的
格式化信息。
E:link 未访问的链接
E:visited 已访问的链接

E:hover 鼠标悬停状态
E:active 选定的激活状态
示例：
/* 按规则的写法 */
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, a:active{color: black;text-decoration: none}
a:hover{color: red;text-decoration: underline; font-size: 30px;}
/* 将所有的 a 标签的状态都修改成下面这样，当处于悬浮状态时进行单独修改*/

a:link{color: black;text-decoration: none}
a:hover{color: red;text-decoration: underline; font-size: 30px;}
注意：

1) :active 这个伪类现在已经不常用了。
2) hover 状态必须写在最后。
3) Link visited hover active。
3.6.2 E:focus 焦点
设置元素在成为输入焦点（该元素的 onfocus 事件发生）时的样式。
示例：

input:focus{
background: blue;
color: yellow;
border: 1px solid black;
outline: none;
}

3.6.3 E:after 和 E:before
E:after 选择器在被选元素的内容后面插入内容。
E:before 选择器在被选元素的内容前面插入内容。
通常使用 content 属性配合，来指定要插入的内容。
示例：
p:before
{
font-size:18px;
color:red;
font-weight: bold;
content:"正文开始"
}

p:after
{
font-weight: bold;
content:"正文结束。"
}

4. CSS 的继承与优先级

4.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;
}

</style>
</head>
<body>
<div class="NewsTitle">
<ul id="out"}>
<li>列表内容 1</li>
<li>列表内容 2</li>
<li>列表内容 3</li>
<li>列表内容 4</li>
<li>列表内容 5</li>
<ul id="inner">