CSS介绍

1.什么是 CSS

CSS全称为Cascading Style Sheets，译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。

2.CSS的作用

html是网页的骨架，而CSS就是对骨架内容的修饰；

html负责结构，css负责样式，js负责行为

CSS 是能够真正做到⽹页表现与内容分离的⼀一种样式设计语⾔言。相对于传统 HTML 的表现⽽而⾔言，CSS 能够对网⻚中的对象的位置排版进像素级的精确控制，支持几乎所有的字体字号样式，拥有对⽹页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语⾔言。

3.为什么要用CSS

样式和内容写在一起会显得非常臃肿，使用css可以单独的将样式抽离出来，可以提高开发效率

CSS提供了很多HTML无法完成的显示效果

抽离出来的CSS可以单独加载，能够实现多个页面的共享，节约网站的带宽，就是节约成本。

4.CSS的历史

从 1990 年年代初 HTML 被发明开始，样式表就以各种形式出现了了，不不同的浏览器器结合了了它们各⾃自的样式语⾔言，读者可以使⽤用这些样式语⾔言来调节⽹网⻚页的显示⽅方式。⼀一开始样式表是给读者⽤用的，最初的 HTML 版本只含有很少的显示属性，读者来决定⽹网⻚页应该怎样被显示。
但随着 HTML 的成⻓长，为了了满⾜足设计师的要求，HTML获得了了很多显示功能。随着这些功能的增加外来定义样式的语⾔言越来越没有意义了了。
1994 年年哈坤·利利提出了了 CSS 的最初建议。伯特·波斯（Bert Bos）当时正在设计⼀一个叫做“Argo”的浏览器器，他们决定⼀一起合作设计 CSS。当时已经有过⼀一些样式表语⾔言的建议了了，但 CSS 是第⼀一个含有“层叠”的主意的。在 CSS 中，⼀一个⽂文件的样式可以从其他的样式表中继承下来。读者在有些地⽅方可以使⽤用他⾃自⼰己更更喜欢的样式，在其他地⽅方则继承，或“层叠”作者的样式。这种层叠的⽅方式使作者和读者都可以灵活地加⼊入⾃自⼰己的设计，混合各⼈人的爱好。哈坤于 1994 年年在芝加哥的⼀一次会议上第⼀一次展示了了 CSS 的建议，1995 年年他与波斯⼀一起再次展示这个建议。当时 W3C 刚刚创建，W3C 对 CSS 的发展很感兴趣，它为此组织了了⼀一次讨论会。哈坤、波斯和其他⼀一些⼈人（⽐比如微软的托⻢马斯·雷雷尔登）是这个项⽬目的主要技术负责⼈人。1996 年年底，CSS 已经完成。1996 年年 12 ⽉月 CSS 要求的第⼀一版本被出版。 1997 年年初，W3C 内组织了了专⻔门管 CSS 的⼯工作组，其负责⼈人是克⾥里里斯·⾥里里雷雷。这个⼯工作组开始讨论第⼀一版中没有涉及到的问题，其结果是 1998 年年 5 ⽉月出版的第⼆二版要求。到 2007 年年为⽌止，第三版还未完备

5如何使用（引用）CSS

方式1：行内样式表

通过标签的style属性设置

<!DOCTYPE html> <html>  <head>    <title>01_第⼀一种使⽤用⽅方式.html</title>  </head>  <body>    <!-- style="css属性:css属性值;" -->    <div style="color:red;" >atguigu</div>  </body> </html>

方式2：内联样式表

通过style标签实现

<!DOCTYPE html>
<html>
<head>
<title>02_第⼆二种使⽤用⽅方式.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--         style标签:封装样式内容           * type:指定使⽤用样式,值为"text/css"           * 设置CSS语法:
选择器器 {  属性名 : 属性值; }     -->
<style type="text/css">       div {           color : red;       }  </style> </head>
<body>
<div>atguigu</div>
</body>
</html>

方式3：外联样式表

通过link标签引入外部css文件

<!DOCTYPE html>
<html>
<head>
<title>04_第四种使⽤用⽅方式.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--         link标签:           * href:引⼊入外部css⽂文件路路径
* rel:设置引⼊入⽂文件为样式⽂文件
* type:指定使⽤用样式,值为"text/css"     -->
<link href="div.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>atguigu</div>
</body>
</html>

说明：

当设置的属性非常少，需要设置的标签也非常少(只有一处)，可以使用行内样式

当一个网页的内部，很多标签都需要使用同样的显示效果，可以是内联样式

当一个网站的多个页面需要使用同样的显示效果，可以将相同样式单独放在css文件中，即外联样式

6.块级元素与行内元素

1.块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

2.行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。

块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。而当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。
块级元素和内联元素的区别

1.块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，

2.一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效

（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3. 块级元素盒子模型padding、margin都有效

行内元素的盒子模型：边框和内边距都是有效的外边距的问题：左右外边距有效，上下外边距无效

7.CSS语法

选择器 {属性名称 : 属性值; 属性名称 : 属性值;...}

语法特点:

CSS声明总是以键值对(key\value)形式存在。

CSS声明总是以分号(;)结束。

声明组以⼤大括号({})括起来。

为了让CSS可读性更更强，每行只描述一个属性

注释使用：/* 注释 */

CSS文件中不需要使用style标签

8 .CSS选择器

a.4种常见选择器

元素（标签）选择器、id选择器、类（class)选择器、属性选择器

1.标签选择器

就是用标签名来当做选择器。

1）所有标签都能够当做选择器，比如body、h1、dl、ul、span等等

2）不管这个标签藏的多深，都能够被选择上。

3）选择的是所有的，而不是某一个。所以是共性，而不是特性。

比如网易，希望页面上所有的超级链接都没有下划线：

a{
/*去掉下划线：*/
text-decoration: none;
}

2.id选择器

#表示选择id

1）任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线。大小写严格区别，也就是说rr和RR是两个不同的id。

2）同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。

也就是说，如果有一个<p>的id叫做haha，这个页面内，其他所有的元素的id都不能叫做haha.

3.class选择器

. 就是类的符号。类的英语叫做class。

所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。

class属性可以重复，比如，页面上可能有很多标签都有haha这个类

1  <h3>我是一个h3啊</h3>
2   <h3 class="haha">我是一个h3啊</h3>
3   <h3>我是一个h3啊</h3>
4   <p>我是一个段落啊</p>
5   <p class="haha">我是一个段落啊</p><p class="haha">我是一个段落啊</p>

css里面用 . 来表示类：

1   .haha{
2           color: red;}

同一个标签，可能同时属于多个类，用空格隔开：

<h3 class="haha  yaoyao">我是一个h3啊</h3>

这样，这个h3就同时属于haha类，也同时属于yaoyao类。

初学者常见的错误，就是写成了两个class：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

所以要总结两条：

1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；

2）同一个标签可以同时携带多个类。

类的使用，能够决定一个人的css水平。

比如，我们现在要做一个页面：

正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：

1<style type="text/css">
2       .lv{
3           color:green;
4       }
5       .da{
6           font-size: 60px;
7       }
8       .xian{
9           text-decoration: underline;
10      }</style>

每个标签，就去选取自己想要的类：

1   <p class="lv da">段落1</p>
2   <p class="lv xian">段落2</p><p class="da xian">段落3</p>

也就是说：

1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。

2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

总结：类上样式，id上行为

层叠式的含义：就是一个标签，可以同时被多种选择器选择，标签选择器、id选择器、类选择器。这些选择器都可以选择上同一个标签，从而影响样式，这就是css的cascading“层叠式”的第一层含义。

4.属性选择器

[ 属性名]

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器

www.w3school.com 这个上面有许多小栗子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常见的选择器</title><style>/* TODO 元素选择器 - 匹配所有相同元素名的元素 */h1 {background-color: lightskyblue;color: lightcoral;}/* TODO ID选择器 - 只有匹配唯一的一个元素 */#p1 {background-color: lightgreen;color: lightslategrey;}/* TODO 类选择器 */.myclass {background-color: lightskyblue;color: lightcoral;}/* TODO 属性选择器 */[title] {background-color: lightgreen;color: lightslategrey;}</style>
</head>
<body>
<h1>这是一个标题</h1>
<p id="p1">这是一个段落内容.</p>
<p class="myclass">这还是一个段落内容.</p>
<p title="this is p">这又是一个段落内容.</p>
</body>
</html>

b.3种关系选择器

1.后代选择器：选择器选择器（//中间用空格分开）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>后代选择器</title><style>#d1 {width: 200px;height: 100px;background-color: lightblue;}/*TODO 后代选择器TODO * 目标元素 -> id 为 d1 的 div 元素TODO * 后代元素 -> id 为 d11、d12 和 d111 的 div 元素*/#d1 div {width: 100px;height: 50px;background-color: lightcoral;}</style>
</head>
<body>
<div id="d1"><div id="d11"><div id="d111"></div></div><div id="d12"></div>
</div>
</body>
</html>

2.子选择器：选择器>选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>子元素选择器</title><style>#d1 {width: 200px;height: 100px;background-color: lightblue;}/*TODO 子元素选择器TODO * 目标元素 -> id 为 d1 的 div 元素TODO * 子元素元素 -> id 为 d11 和 d12 的 div 元素*/#d1>div {width: 100px;height: 50px;background-color: lightcoral;}</style>
</head>
<body>
<div id="d1"><div id="d11"><div id="d111"></div></div><div id="d12"></div>
</div>
</body>
</html>

3.相邻元素选择器（下一个兄弟）：选择器+选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相邻兄弟素选择器</title><style>#d1 {width: 200px;height: 100px;background-color: lightblue;}#d11+div {width: 100px;height: 50px;background-color: lightcoral;}</style>
</head>
<body>
<div id="d1"><div id="d11"><div id="d111"></div></div><div id="d12"></div>
</div>
</body>
</html>

c.2种组合选择器

第一种 - 交集结果
* 多个选择器并列使用，中间没有任何分隔

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器一</title><style>/* TODO 为所有<p>元素设置统一的样式 */p {color: lightblue;}/*TODO <p class="myclass">TODO * 在所有<p>元素中，专门为 class="myclass" 的<p>元素TODO 组合选择器 - 第一种TODO 元素选择器 类选择器TODO * 结果 -> 两种选择器的交集*/p.myclass {color: lightcoral;}</style>
</head>
<body>
<p>这是一个段落内容.</p>
<p class="myclass">这是另一个段落内容.</p>
</body>
</html>

第二种 - 并集结果
* 多个选择器并列使用，中间使用","分隔

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器二</title><style>/*h1 {color: lightcoral;}p {color: lightcoral;}*/h1,#p1 {color: lightcoral;}</style>
</head>
<body>
<h1>这是标题</h1>
<p id="p1">这是一个段落内容.</p>
</body>
</html>

d.通配符选择器（*）
* 作用 - 匹配当前 HTML 页面中的所有元素
* 问题 - 匹配的速度不是很快(页面元素的数量和复杂程度)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通配符选择器</title><style>* {background-color: lightblue;}</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是一个段落内容.</p>
</body>
</html>

e.伪类选择器

CSS 伪类⽤用于向某些选择器添加特殊的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类</title><style>a {/* TODO 去掉链接中自带的下划线 */text-decoration: none;}/* TODO 设置链接未访问的样式 */a:link {color: lightslategrey;}/* TODO 设置链接被访问后的样式 */a:visited {color: lightgray;}/* TODO 设置鼠标悬停在链接元素上时的样式 */a:hover {color: lightskyblue;}/* TODO 设置鼠标选中链接元素时的样式 */a:active {color: lightcoral;}</style>
</head>
<body>
<!--TODO <a href="#"> 表示伪链接TODO * 浏览器对<a>的几种状态提供了默认样式TODO   * 未做任何操作时 - 字体是蓝色，下划线TODO   * 当鼠标点中链接文本时 - 字体是红色TODO   * 当访问过链接后 - 字体变化-->
<a href="#">这是一个链接</a>
</body>
</html>

9.css的继承性和层叠性

9.1继承性

首先说一下什么是继承性，就是有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。

哪些属性能继承？
答：color、text-开头的、line-开头的、font-开头的，等。

这些关于文字样式的，都能够继承;所有关于盒子的、定位的、布局的属性都不能继承。

所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：

1body{
2    color:gray;
3    font-size:14px;
}

继承性是从自己开始，直到最小的元素。

接下来这个知识点比较重要，悟性高者十分钟可成，差一点的十一分钟才能练成；

9.2 层叠性

层叠性：就是CSS处理冲突的能力。所有的权重计算没有任何兼容问题。

CSS像艺术家一样优雅，像工程师一样严谨；

上图中div的蓝色和橙色就被紫色覆盖（层叠）掉了；

那为什么会被覆盖掉呢，芝士来了：

当选择器，选择上了某个元素的时候，那么要这么统计权重：

id的数量，类的数量，标签的数量

先比较id数量，谁大听谁的，class和标签就不用比较了，如果id一样大，再比较class数量；若class一样大，再比较标签数量。

所以上图“猜猜我是什么颜色”是红色；

权重不进位，实际上能进位（知识点：255个标签，等于1个类名）但是没有实战意义！

如果权重一样呢：哪个选择器在下面听谁的，因为他会把上面的覆盖掉；所以第二个选择器有效，字体是蓝色；

<head><meta charset=UTF-8"><title>层叠性</title><style type="text/css">#box1 .hezi2 p{color:red;}#box2 .hezi3 p{color:cornflowerblue;}</style>
</head>
<body>
<div class="hezi1" id="box1"><div class="hezi2" id="box2"><div class="hezi3" id="box3"><p>猜猜我是什么颜色？</p></div></div>
</div>
</body>

开始数权重前，要看看选择器是否选中了元素，如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

如果大家没有选中，都是0，那么有一个就近原则：谁描述的近，听谁的。

权重问题大总结：

1.选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。

2.没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。

下面这个例子是都没有选择上p标签，描述的一样近，然后权重都是1，1，0.所以谁写在后听谁的，蓝色

单个选择器的优先级别：

选择器的优先级 - 行内样式 -> ID选择器 -> 类选择器和属性选择器 -> 元素选择器

!important标记

1、 !important提升的是一个属性，而不是一个选择器

1p{
2           color:red !important;   → 只写了这一个!important，所以就字体颜色属性提升权重
3           font-size: 100px ;      → 这条属性没有写!important，所以没有提升权重
4       }
5       #para1{
6           color:blue;
7           font-size: 50px;
8       }
9       .spec{
10          color:green;
11          font-size: 20px;}

所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;

2、 !important无法提升继承的权重，该是0还是0

3、!important不影响就近原则

如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？

答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

!important在实际开发中，不建议使用

零基础CSS教程（一）相关推荐

视频教程-HTML + CSS零基础经典教程系列-HTML5/CSS
HTML + CSS零基础经典教程系列全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP.Ja ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
Vue零基础实战教程
Vue零基础实战教程带有基本 Vue js 应用程序的 Vue.Vue.js 是一个流行的前端 JavaScript 框架.学习vuejs,成为vue开发者课程英文名:Vue from Scrat ...
gulp菜鸟级零基础详细教程，嘴对嘴教会你怎么使用gulp
gulp菜鸟级零基础详细教程,嘴对嘴教会你怎么使用gulp 相信大家一定听说过gulp或者webpack,grunt等前端构建工具,这些是做什么用的我也不知道,也许他们会和一些前端框架用到一起,让开发 ...
初学HTML5--盒子模型,5.1 盒子模型 - Adobe Dreamweaver CC零基础入门教程 - 平面设计学院 - 勤学网...
课时:42节课时长:13.0小时课级:基础入门期待已久的Dreamweaver软件教程终于和大家见面啦!老师一贯的细致全面讲解风格,注重每个专业术语的概念介绍和软件实操相结合,帮助大家全面理解掌 ...
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)
一.什么是数据类型编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
Wireshark零基础使用教程（超详细）
「作者主页」:士别三日wyx 「作者简介」:CSDN top100.阿里云博客专家.华为云享专家.网络安全领域优质创作者「专栏简介」:此文章已录入专栏<网络安全快速入门> Wiresha ...
下载python教程-零基础Python教程全集下载.pdf
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp计算机&nbsp>&nbspPython 零基础Python教程全集下载.pdf3页本文档 ...

零基础CSS教程（一）

CSS介绍

9.css的继承性和层叠性

零基础CSS教程（一）相关推荐

最新文章

热门文章