CSS基础知识点
1.1、css是什么？有什么用？
HTML---------》 页面的结构 -------》 人的面部（素颜）
CSS ---------》 美化页面 -------》 给人化妆
CSS：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
给一个人的面部化妆 ， 画口红 画眼影 打粉底
HTML标签 样式1 样式2 样式3
CSS的作用：修饰HTML页面，更丰富多彩地展示超文本信息
1.2css入门案例
-
步骤1：创建一个HTML文件
-
步骤2：在HTML上创建一个字体标签
-
步骤三：字体标签中新增一个style属性，并修改style属性值
1.3为什么使用CSS替代HTML属性设置样式
因为HTML属性单独使用时有一点的局限性，所以要配合CSS样式代码才可以展示更为丰富的效果
1.4CSS的代码规范
放置规范
-
在< style>标签内容体中书写css样式代码
-
< style>标签放置在< head>标签之中
格式规范：
-
选择器名称{属性名：属性值；属性名：属性值；.......}
-
选择器：即指定CSS样式作用在哪些HTML标签上
代码规范：
-
属性名和属性值之间是键值对关系；
-
属性名和属性值之间 用“：”连接，“；”结尾； 例如：font-size：120px；
-
如果一个属性名有多个值，多个值之间用 空格 隔开。例如：border:1px solid blue;
-
css注释： /注释内容/
2.css选择器
2.1、基本选择器
2.1.1、元素选择器
HTML标签又名HTML元素。
元素选择器：即以HTML标签名作为选择器名称
作用：选择css样式代码 作用于对应标签名的标签上
-
格式：
标签名{
/css样式代码/
}
适用范围：适用于将相同样式 作用在多个同名标签上
2.1.2、类选择器
每个HTML标签都有一个class属性，class属性值即为类名
类选择器：即以HTML的类名（class属性值）作为选择器名称。
作用：选择css样式代码作用于对应类名的HTML标签上
-
格式：
.类名{
/css样式代码/
}
适用范围：适用于将样式一次作用在相同类名的标签上。
2.1.3、id选择器
每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。
id选择器：即以HTML的id（id属性值）作为选择器名称。
作用：选择css样式代码 作用于 某个规定id值的html标签上
-
格式：
#id值{
/css样式代码/
}
适用范围：适用于将样式 作用某个标签上。（更有针对性）
注意：必须手动保证id值在本页面唯一
2.2.基本选择器的组合方式
2.2.1、层级关系
标签和标签之间有层级关系，例如< html>标签的子标签为< body>标签。
我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上
-
格式：
选择器1 选择器2......{
/css样式代码/
}
选择器1 下的 选择器2
3.css样式
3.1.边框属性
3.1.1、border
设置边框的样式
-
格式：宽度 样式 颜色
例如：border：1px solid red ， 1像素粗的 实线 红色边框。
线条样式：solid实线 ， none 无边 ， double 双线
3.1.2、width
用于设置标签的宽度
3.1.3、height
用于设置标签的高度
3.1.4、background-color
用于设置标签的背景颜色
背景颜色设置的两种主流方式：
①英文单词 例如：red，blue，yellow
②颜色代码 例如：#红绿蓝 ， 每个颜色用两个16进制位数表示
例如：#ff1100 红色 ff， 绿色11 ，蓝色00 ，红色颜色最重，绿色其次 ，没有蓝色
3.2.布局
3.2.1、float
-
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中需要左右方式进行排版，就需要使用浮动属性。
-
格式：
选择器{float属性值；}
-
常用属性值：
none：元素不浮动（默认值）
left：元素向左浮动
right;元素向右浮动
-
注意：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整
3.3.转换
3.3.1、display
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素。
-
块元素：以区域块方式出现。每个块标签独自占据一整行或者多整行。块结束会自动换行。
常见的块元素：< h1> < p> < div> < ul>等
-
行内元素：根据内容多少来占用行内空间，不会自动换行
常见的行内元素：< span>、< a>等
display属性可以使得元素在行内元素和块级元素之间互相切换。
-
格式：
选择器{display：属性值}
-
常用的属性值：
block：此元素将显为块元素（块元素默认的display属性值）
inline:此元素将显示为行内元素（行内元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
3.4.字体
3.4.1、font-size
用于设置字体的大小
3.4.2、color
用于设置字体的颜色
4.css盒子模型
4.1.什么是盒子模型
所有的HTML元素，我们都可以看成一个四边形，即一个盒子。
用css来设置元素盒子的内边距、边框和外边距的样式的方式，
相当于设置盒子的样式，所以我们将其称之为 盒子模型
4.2.边框（border回顾及再阐述）
边框有四个属性可以设置：
-
border-top：上边框
-
border-right：右边框
-
border-bottom：下边框
-
border-left：左边框
通用性设置：
一次性设置上下左右边框样式为1像素 实线 红色线
border：1px solid red；
4.3.内边距padding
HTML元素到边框的距离
内边距有四个属性可以设置：
-
padding-top：上边距
-
padding-right：右边距
-
padding-bottom：下边距
-
padding-left：左边距
通用性设置：
一次性设置上下左右内边距距离为10px
padding：10px；
4.4.外边距margin
外边距：HTML元素边框到其它HTML元素边框的距离
外边距有四个属性可以设置：
-
margin-top：上边距
-
margin-right：右边距
-
margin-bottom：下边距
-
margin-left：左边距
通用性设置：
一次性设置上下左右外边距距离为10px
margin：10px；
5.css和HTML的结合方式
5.1内部样式
5.1.1、行内样式
行内样式，是通过标签的style属性来设置元素的样式
-
格式： < html 标签 />
-
示例：
< a >传智播客< /a>
5.1.2、< style>< /style>标签方式
当某些样式在页面中被多个标签重复使用，为了编码更加灵活，避免写重复代码，我们将样式代码从标签style属性中抽取出来，统一写入到style标签中。
-
格式
< style>
css样式代码
< /style>
-
示例
-
应用环境：适合页面中进行样式复用
5.2外部样式
5.2.1、< link/>标签方式
< link/>又称链入式，是将所有的样式放在一个或多个以css为扩展名的外部样式表文件中，通过< link>标签将样式连接到HTML文件中。
-
格式：
< link rel="stylesheet" type="text/css" href="css文件路径"/>
-
rel="stylesheet",固定值，表示样式表
-
type="text/css"，固定值，表示css类型
-
href，表示css文件位置
-
示例
a{ font-size: 120px; color: #f00; }
-
适合：不同页面进行样式复用。
浙公网安备 33010602011771号