CSS小白入门笔记 - 爱站程序员基地-爱站程序员基地

一、CSS简介

1. 什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置规则，用于控制页面的外观样式

2. CSS作用

页面外观美化
布局和定位

二、基本用法

1.CSS语法

<head><style type=\"text/css\">选择器{属性名:属性值;属性名:属性值;}</style></head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪个属性（样式）
属性值：属性的取值

2. CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面所有符合样式选择器的标签都起作用

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3 外部样式

使用单独的

css

文件定义，然后在页面头部中使用link标签引入外部样式表

<link rel=\"stylesheet\" href=\"css样式文件的路径\" type=\"text/css\">

所有引入样式表文件的页面都起作用

步骤：

新建一个css目录，目录下建一个
```
.css
```
文件
在html文件的头部使用link标签引入外部样式表

.css

文件:

span{color:green;text-decoration: underline;}

.html

文件：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><!--内部样式--><style>p{color:red;font-size:50px;}</style><!--引用外部样式文件--><link rel=\"stylesheet\" href=\"css/style.css\"></head><body><p>welcome</p><!--行内样式--><div style=\"color: blue; font-weight: bold;\">to</div><p>css</p><span>哈哈</span></body></html>

3. CSS注释

CSS的注释形式：/**内容**/

注意：千万不要在style标签中写html的注释，如下

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>/*正确注释*/<!--错误注释-->p{color:red;font-size:50px;}</style></body></html>

三、选择器

1. 基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器名称

以标签名作为样式应用依据

1.2 类选择器

使用自定义名称，以

作为前缀，然后通过HTML标签的class属性调用类选择器

以标签的class属性值作为样式应用依据

注意：

调用时不能添加
```
.
```
号
同时调用多个类选择器时以空格隔开
类选择器名称不能以数字开头

1.3 ID选择器

使用自定义名称，以
```
#
```
作为前缀，然后通过HTML标签的id属性进行名称自动匹配

以标签的id属性值作为样式应用依据，一对一的关系

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>/*标签选择器*/p{color: red;}/*类选择器*/.hello{color: blue;}.world{text-decoration: line-through;}/*ID选择器*/#aaa{background: #ccc;}</style></head><body><!--引用ID选择器--><p id=\"aaa\">嘿嘿</p><div>哈哈</div><span>嘻嘻</span><p>吼吼</p><div class=\"hello\">YY</div><!--同时调用多个类选择器--><ul><li class=\"hello world\">Java开发</li></ul></body></html>

2. 复杂选择器

2.1 复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

2.2 组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号

隔开

2.3 嵌套选择器

在某个选择器内再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注：使用

空格

时不区分父子还是后代，使用

时必须是父子关系才行

2.4 伪类选择器

根据不同的状态显示不同的样式，一般多用于a标签，即超链接

四种状态：

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标移动到链接上，即悬浮在链接上

:active 选定的链接，被激活

要注意四种状态的书写顺序： link——> visited——>hover——>active

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>/*复合选择器:标签选择器和类选择器*/p.hello{color: red;}/*复合选择器:标签选择器和ID选择器*/div#world{color: blue;}/*组合选择器，也称为集体声明*/.hello{text-decoration: underline;}.world{text-decoration: line-through;}div.abc{text-decoration: overline;}.hello,.world,div.abc{font-size: 20px;font-weight: bold;background: #cccccc;}/*嵌套选择器*/div span{font-style: italic;}/*伪类选择器*//*只能按照这种顺序书写，不能随便换顺序*/a:link{font-size: 12px;color: red;text-decoration: none;}a:visited{font-size: 20px;color: yellow;text-decoration: none;}a:hover{font-size: 30px;color: blue;text-decoration: none;}a:active{font-size: 40px;color: green;text-decoration: none;}</style></head><body><p class=\"hello\">welcome</p><div id=\"world\" class=\"abc\">to</div><span class=\"hello\">css</span><p>hello</p><div><span>嘿嘿</span></div><!--如果上面嵌套选择器写的是div>span,那只有父子关系可以应用，下面这种不能应用--><div><p><span>嘻嘻</span></p></div><a href=\"test02.html\">打开test02页面</a></body></html>

3. 选择器优先级

3.1 优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

原因：首先加载标签选择器，再加载类选择器，然后加载ID选择器，最后加载行内样式

后加载的会覆盖先加载的同名样式

注：当样式不冲突时会全部加载，样式冲突时按选择器的优先级加载

3.2 内外部样式加载顺序

就近原则

原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

3.3 !important

可以使用

!important

使某个样式属性具有最高的优先级

<style>p{color: red;text-decoration: underline!important;}</style>

四、常用CSS属性

1. 字体属性

定义字体相关的样式

属性	含义	说明
font-size	大小、尺寸	所有CSS属性的默认值都为inherit（继承父容器的大小）
font-weight	粗细	取值：normal、bold（粗体）
font-family	字体	取值：黑体、楷体等
font-style	样式	取值：normal、italic（斜体）

2. 文本属性

属性	含义	解释
color	颜色	使用英文单词、16进制的RGB值，特定情况下可以缩写，如#FFFFFF > #FFF
line-height	行高	行内容的高度，也可以简单的理解为行之间的距离
text-align	水平对齐方式	取值：left、center、right
vertica-lalign	垂直对齐方式	取值：top、middle、bottom，可用于图片和文字的对齐方式
textdecoration	文本修饰	取值：underline、overline、linethrough、none

3. 背景属性

属性	含义	解释
background-color	背景颜色
background-image	背景图片	必须使用 url(路径)
background-repeat	背景图片的重复方式	取值：repeat(默认)、repeat-x、repeat-y、no-repeat
backgroundposition	背景图片的显示位置	取值：关键字（top、bottom、left、right、center）、坐标
background	简写	一般顺序：颜色图片重复方式显示位置

<style>p{background-color: #ccc;background-image: url(image/qq.jpg);background-repeat: no-repeat;background-position: center center;background-position: 150px 50px;background: #ccc url(image/qq.jpg) no-repeat 150px 50px;}</style>

4. 列表属性

使用liststyle属性设置列表项前的标记

5. 浮动属性

通过float属性实现元素的浮动，取值：

left 左浮动
right 右浮动
none 不浮动，默认值

6. 元素的显示和隐藏

通过display属性设置元素是否显示，以及是否独占一行

常用取值：

none 不显示
inline 将块级元素变为行级元素，不再独占一行
block 将行级元素变为块级元素，独占一行
inline-block 在inline的基础上允许设置宽和高

注：行级元素默认无法设置宽和高，可以为行级元素设置display:inline-block，然后就可以设置宽和高

五、盒子模型

1. 概念

盒子模型是网页布局的基础，将页面中所有的元素都看作成一个盒子，盒子都包含以下几个属性：

width 宽度
height 高度
border 边框
padding 内边距
margin 外边距

2. 盒子属性

2.1 border

表示盒子的边框

分为四个方向：上top、右right、下bottom、左left每个边都包含三种样式：颜色color、粗细width、样式styleborder-style的取值：solid实线、dashed虚线、dotted点状线、double双线等简写，三种方式：

按方向简写

border-top、border-right、border-bottom、border-left

书写顺序，border-方向 : width style color
按样式简写

border-color、border-width、border-style、border-radius圆角

书写顺序，border-样式 : top right bottom left

必须按顺时针方向书写，即：上、右、下、左的顺序，同时可以缩写

border-width : 2px ——> 四个边的宽度都为2px

border-width : 2px 4px

border-width : 2px 3px 4px

注：如果省略，则认为上下一样、左右一样
终极简写

如果四个边都一样，border : width style color

2.2 padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向、默认上下一样，左右一样）

2.3 margin

表示盒子的外边距，即盒子与盒子之间的距离