学习笔记（二）——CSS基础
文章目录
- 一、什么是CSS
- 二、CSS基本使用
- 2.1、行内式(内联样式)
- 2.2、内部样式
- 2.3、外部样式
- 2.3.1、嵌入式
- 2.3.2、导入式
- 三、选择器
- 3.1、基础选择器
- 3.1.1、标签选择器
- 3.1.2、id 选择器
- 3.1.3、类选择器
- 3.1.4、通配符选择器
- 3.2、复合选择器
- 3.2.1、后代选择器
- 3.2.2、子元素选择器(子代选择器)
- 3.2.3、交集选择器
- 3.2.4、并集选择器
- 3.2.5、伪类选择器
- 四、字体/文本
- 4.1、字体常用样式
- 4.2、文本常用样式
- 五、背景
- 5.1、背景常用样式
一、什么是CSS
CSS (全称Cascading Style Sheets，层叠样式表)是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。HTML 和CSS 就是“内容”和“形式”的关系，由HTML 组织网页的结构，而通过CSS 来决定页面的表现形式。
由于HTML 的主要功能是描述网页的结构，所以控制网页外观的能力很差，如无法精确调整文字大小、行距等结构，而且不能对多个网页元素进行统一的样式设置，只能一个一个元素地设置。使用CSS 可实现对网页的外观和排版进行更灵活的控制，使网页更美观。
CSS样式表是由一系列样式规则组成的，浏览器将这些规则应用到相应的元素上，CSS语言实际上是一种描述HTML 元素外观（样式）的语言。
二、CSS基本使用
**优先级：**行内式 > 内联式 > 外部式
2.1、行内式(内联样式)
所有 HTML 标记都有一个通用的属性 style，行内式就是将元素的 CSS 规则作为 style 属性的属性值写在元素的标记内。
书写格式如下：
<开始标签 style="css属性1:属性值1;css属性2:属性值2···">
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title>
</head>
<body><span style="color: aquamarine; font-size: 50px">大家好啊！</span>
</body>
</html>
结果展示：
行内式的优点是：由于 CSS 规则就写在标记内，其作用对象就是该元素，所以无须书写 CSS 的选择器。有时需要做测试或对个别元素设置 CSS 属性，这时可以使用这种方式，只需书写属性和值，但它没有体现出 CSS 统一设置许多元素样式的优势。
2.2、内部样式
内部样式也称嵌入式，将页面中的各种元素的 CSS 样式设置集中写在<style> 和</stytle> 之间，<style>标记是专用于引入嵌入式 CSS 的一个 HTML 标记，它只能放置在文档头部，即<style>···</style>只能放置在文档的<head>和</head>之间。
书写格式如下：
选择器{css属性1:属性值1;css属性2:属性值2;·····
}
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>span{color: aqua;font-size: 50px;}</style>
</head>
<body><span>这是内部样式！</span>
</body>
</html>
结果展示：
为单一的网页设置样式，嵌入式很方便且最常用。但是对于一个包容很多网页的网站来说，如果每个网页都以嵌入式的方式设置各自的样式，不仅麻烦，冗余代码多，而且网站中各个页面的风格不好统一。因此，对于一个网站来说，通常都是编写独立的 CSS 文件，使用外部样式方法，引入到网站的所有 HTML网页文档中。
2.3、外部样式
当 CSS 样式需要应用于很多页面时.外部样式表(外部 CSS 文件)将是理想的选择。所谓外部样式表，就是将 CSS 规则写人到一一个单独的文本文件中,并将该文件的后缀名命名为. css。然后使用链接式或导人式的方法将外部 CSS 文件引人到HTML文件中，其优点是可以让很多个网页共享一 个 CSS 文件设置的样式。
在学习 CSS 或制作单个网页时，为了方便可采取行内式或嵌人式方法引人 CSS ，但若要制作网站，则主要应采用链接式引人外部 CSS 文件，以便使网站内的所有网页风格统一。而且在使用外部样式表的情况下，可以通过改变一个外部 CSS 文件来改变整个站所有页面的外观。下面介绍引人外部 CSS 文件的方法。
2.3.1、嵌入式
链接式是在网页头部使用 HTML 标记<link>引入外部CSS文件,语法如下:
<link href="it.css" rel="stylesheet">rel:定义当前文件与被链接文件之间的关系，stylesheet, 表示当前被链接的文件是一个样式表文件
href:定义样式表文件链接，可以是网络路径也可以是本地路径
这里的it.css是指你的css文件名
示例：
it.css文件:（注意该文件中不需要书写<style>标记）
span{color: aqua;font-size: 50px;}
it.html文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link href="it.css" rel="stylesheet"><title>示例</title>
</head>
<body><span>这是链接式！</span>
</body>
</html>
结果展示：
2.3.2、导入式
导入式是通过 CSS 规则中的@import 指令来导入外部 CSS 文件，语法如下：
<style>@import "it.css"; /*导入你的css文件*/
</style>
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>@import "it.css"; /*这里文件和上面一样*/</style>
</head>
<body><span>这是链接式！</span>
</body>
</html>
/*执行结果和上面链接式一样这里就不展示了*/
此外,这两种方式的显示效果也略有不同。使用链接式时，会在装载页面主体部分之前装载 CSS 文件,这样显示出来的网页从一开始就是带有样式效果的;而使用导人式时，要在整个页面装载完之后再装载 CSS 文件，如果页面文件比较大，则开始装载时会显示无样式的页面。从浏览者的感受来说,这是使用导人式的一个缺陷。
三、选择器
选择器就是为了选中文档中要应用样式的那些元素，为了能够灵活选中文档中的某类或某些元素,CSS定义了很多种选择器。其中,主要分为基础选择器和复合选择器两大类。
3.1、基础选择器
选择器优先级比较：id 选择器 > 类选择器 > 标签选择器
3.1.1、标签选择器
可以把某一类标签全部选择出来。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>span{ /*标签选择器*/ color: red;font-size: 50px;}</style>
</head>
<body><span>标记选择器</span>
</body>
</html>
结果展示：
3.1.2、id 选择器
根据id属性值来进行选择，使用以#开头。
注意：要应用id 选择器，首先必须给某个元素添加 id 属性。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>#text{ /*注意以 # 开头，text为id名*/ /*id 选择器#text*/color: blue; font-size: 50px;}</style>
</head>
<body><span id="text">id 选择器</span>
</body>
</html>
结果展示：
3.1.3、类选择器
根据 class 属性值来进行选择,使用时以.开头。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>.text{ /*类选择器.text*/color: red;font-size: 50px;}</style>
</head>
<body><span class="text">类选择器</span>
</body>
</html>
结果展示：
3.1.4、通配符选择器
匹配所有标签，使用以*开头。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>*{color: red;font-size: 20px;}</style>
</head>
<body><span>span标签</span><p>p标签</p><h1>h1标签</h1><div>div标签</div>
</body>
</html>
结果展示：
3.2、复合选择器
3.2.1、后代选择器
使用空格分隔开，如：
div a{color: chartreuse;font-size: 30px;}
后代选择器有什么用？以下面示例 2来讲，<div>就是爷爷，<ul>是儿子，<li>就是孙子，后代选择器可以将儿子和孙子的字体属性等全部修改掉。
示例 1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>div a{color: chartreuse;font-size: 30px;}</style>
</head>
<body><!--把内部链接的a标签的字体改为绿色--><div><a href="https://www.baidu.com">儿子</a></div><a href="https://https://www.baidu.com">儿子</a>
</body>
</html>
结果展示：
示例 2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>.py ul{color: chartreuse;font-size: 30px;}</style>
</head>
<body><!--把孙子字体改为绿色--><div class="py"><ul><li>孙子</li><li>孙子</li></ul></div><ul><li>human</li><li>human</li></ul>
</body>
</html>
结果展示：
3.2.2、子元素选择器(子代选择器)
使用>分隔开，如：
div>span{color: chartreuse;font-size: 30px;}
后代选择器的作用范围为全部后代，其范围比较广，根据需要有时我们会选择作用范围较小的子代选择器，其作用范围为：直接的亲属的子元素，不包含孙子元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>div>span{ /*如果我们这里用div span的话所有的span标签的字体都会发生改变*/color: chartreuse;font-size: 30px;}</style>
</head>
<body><div><span>儿子</span><span>儿子</span><span>儿子</span></div><div><p><span>孙子</span><span>孙子</span><span>孙子</span></p></div></body>
</html>
结果展示：
3.2.3、交集选择器
注意用.分隔
既是···又是···，以下例子为例：既是p标签又class为py
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>p.py{color: blue;}</style>
</head>
<body><!--让p标签并且带有class=py变为蓝色--><p class="py">蓝色</p><p class="py">蓝色</p><p>黑色</p><p>黑色</p><div class="py">蓝色</div><div class="py">蓝色</div>
</body>
</html>
结果展示：
3.2.4、并集选择器
注意用,分隔开
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>p,span{color: blue;}</style>
</head>
<body><!--让p标签和span标签字体变为蓝色--><p>p标签</p><p>p标签</p><div>div标签</div><div>div标签</div><span>span标签</span><span>span标签</span><h1>h1标签</h1><h1>h1标签</h1>
</body>
</html>
结果展示：
3.2.5、伪类选择器
伪类(pseudo-class)是用来表示动态事件、状态改变或者是在文档中以其他方法不能
轻易实现的情况——例如用户的鼠标悬停或单击某元素。总的来说，伪类可以对目标元
素出现某种特殊的状态应用样式。这种状态可以是鼠标停留在某个元素上，或者是访问
一个超链接。 伪类允许设计者自由指定元素在一种状态 下的外观。
常用的伪类有4个，分别是: link(链接)、: visited(已访问的链接)、hover(鼠标悬停状态)和:active(激活状态)。其中前面两个称为链接伪类，只能应用于链接a元素，后两种称为动态伪类，理论上可以应用于任何元素,但IE6只支持a元素的上述伪类。其他的一些伪类如:focus(获得焦点时的状态)因为在IE 6中不支持，所以用得较少。
为了更直观的学习，下面以<a>标签为例：
超链接 a 标签的4个伪类
| 伪类 | 作业 |
|---|---|
| a:link | 正常浏览状态的样式 |
| a:visited | 被单击过的超链接的样式风格 |
| a:hover | 鼠标指针悬停在超链接上时的风格 |
| a:active | 当前激活(在鼠标单击与释放之间发生)的样式风格 |
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>a:link{color: blue;}a:visited{color: chartreuse;}a:hover{color: darkorange;}a:active{color: blueviolet;}</style>
</head>
<body><a href="http://www.baidu.com" style="font-size: 50px">百度一下</a>
</body>
</html>
结果展示：
四、字体/文本
4.1、字体常用样式
| CSS属性 | 含义 | 举例 |
|---|---|---|
| font-family | 字体类型 | font-family=“宋体” |
| font-weight | 字体粗细 | font-weight:bold字体加粗 |
| font-style | 字体样式 | font-style：italic字体倾斜 |
| font-size | 字体大小 | font-size:100px |
复合样式
font:font-style font-weight font-size font-family
如：
div{font:italic bold 100px "宋体"
}
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>span{font-size: 40px;font-family: "微软雅黑 Light";font-weight: bold;font-style: italic;}/*span{*/ /*复合样式*//*font:italic bold 40px "微软雅黑 Light"*//*}*/</style>
</head>
<body><span>pyhton</span>
</body>
</html>
结果展示：
4.2、文本常用样式
| CSS属性 | 含义 | 举例 |
|---|---|---|
| text-align | 对齐方式 | text-align:center |
| text-indent | 首行缩进 | text-indent:2em |
| text-decoration | 文本线 | text-decoration:underline |
| letter-spacing | 字距 | letter-spacing:1.5px |
| text-transform | 大小写转换 | text-transform:uppercase |
| word-spacing | 词距 | word-spacing:10px |
| line-height | 行高 | line-height:30px |
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>p{text-align: center;text-indent: 2em;letter-spacing: 1.5px;word-spacing: 10px;line-height: 30px;}</style>
</head>
<body><p>这个世界，有儒；有道；有佛；有妖；有术士。警校毕业的许七安幽幽醒来，发现自己身处牢狱之中，三日后流放边陲.....他起初的目的只是自保，顺便在这个没有人权的社会里当个富家翁悠闲度日。......多年后，许七安回首前尘，身后是早已逝去的敌人，以及累累白骨。滚滚长江东逝水，浪花淘尽英雄，是非成败转头空。 青山依旧在，几度夕阳红。</p>
</body>
</html>
结果展示：
五、背景
5.1、背景常用样式
| CSS属性 | 含义 | 可用值 |
|---|---|---|
| background-color | 背景颜色 | 命名颜色、十六进制颜色等 |
| background-image | 背景图片 | url(URL) |
| background-repeat | 背景铺盖 | repeat、repeat-x、repeat-y、no-repeat |
| background-attachment | 背景图固定还是随内容滚动 | scroll、fixed |
| background-size | 背景大小 | width、height |
| background-position | 背景定位 | [left | center | right] [top | center | bottom]或[x%] [y%]或[x-pos] [y-pos] |
复合样式
（顺序固定）
background:颜色 图片 是否平铺 固定还是滚动 背景定位/背景大小
如：
background: red url('图片.png') no-repeat scroll center/100px 100px
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例</title><style>div{width: 300px;height: 300px;background-color: yellow;background-image: url("https://www.cc148.com/files/article/image/44/44955/44955s.jpg");background-repeat: no-repeat;background-position: center;background-size: 100px 150px;/*复合样式*//*background: yellow url('https://www.cc148.com/files/article/image/44/44955/44955s.jpg') no-repeat center/100px 150px*/}</style>
</head>
<body><div></div>
</body>
</html>
结果展示：
想学习 CSS 基本使用的可以看我这两篇博客：
学习笔记（二）——CSS基础
学习笔记（二）——CSS基础相关推荐
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- JS学习笔记二——JavaScript 基础知识
JavaScript 基础知识 一.JavaScript 变量 二.JavaScript 的输出 三.JavaScript 运算符 四.结语 一.JavaScript 变量 变量是指在程序运行过程中, ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- 数字图像处理学习笔记 二 数字图像基础
目录 一 .人类视觉成像 二.数字图像处理的基本概念和操作 三.数学工具介绍 一 .人类视觉成像 1.眼睛上两类光感受器:锥状体和杆状体 锥状体: 数量在600-700万之间,主要位于视网膜的中间部分 ...
- HTML5学习笔记二 HTML基础
一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...
- 3月31日学习笔记（CSS基础）
背景属性 文本属性 direction 属性影响块级元素中文本的书写方向.表中列布局的方向.内容水平填充其元素框的方向.以及两端对齐元素中最后一行的位置. 注释:对于行内元素,只有当 unicode- ...
- java冰法_Java基础学习笔记二 Java基础语法
注释 注释用来解释和说明程序的文字,注释是不会被执行的. 单行注释 //这是一条单行注释 public int i; 多行注释 /*这是 * 一段注释, * 它跨越了多个行*/ public void ...
- JAVA高并发学习笔记(二) 多线程基础
1.1什么是线程 线程是进程(程序在计算机上的一次执行活动)内的执行单元 进程是以独立于其他进程的方式运行的,进程间是互相隔离的.一个进程无法直接访问另一个进程的数据.进程的资源诸如内存和CPU时间片 ...
- css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- pythonsze_python学习笔记二 数据类型（基础篇）
Python基础 对于Python,一切事物都是对象,对象基于类创建 不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上海', '深圳' ...
最新文章
- MyBatis-22MyBatis缓存配置【一级缓存】
- Python练习题：计算平均分
- php中mysql_connect与mysql_pconnect的区别
- 怎样在hdfs上创建多级目录文件夹_【HDFS API编程】第一个应用程序的开发-创建文件夹...
- SVN: bdb: BDB1538 Program version 5.3 doesn't match environment version 4.7
- 前端中怎么把网页多个文件夹的内容整合成一个_web前端学习笔记
- 3-12岁经典必读书
- 物联网NodeMCU刷写AT固件
- CSP-S2022游记
- Discuz showWindow函数解析
- 高分子专业计算机建模,高分子与计算机模拟.doc
- python import pandas as pd_python – Pandas pd.Series.isin性能与集合与数组
- win2003 64位系统IIS6.0 32位与64位间切换
- 2个大厂 100亿级 超大流量 红包 架构方案
- 谷歌账号被封怎么办？谷歌账号解封申诉步骤请收好！
- vue循环jq渲染网页页面
- 如何快速搭建红队练习靶场
- 从键盘接收一百分制成绩python_python第一模块练习
- 求是潮android最新版,求是潮手机站最新版
- 页面加载时间过长的解决