1.css简述
1.1 css是什么？有什么作用？
HTML -> 页面的结构 -> 人的面部（素颜）
CSS -> 美化页面 -> 给人化妆
CSS(Cascading Style Sheets)：层叠样式表
层叠：一层一层叠加
样式表：存储样式的地方，多个样式
CSS通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。
CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIC布局更加灵活，更容易绘制出用户需要的结构
CSS作用：修饰HTML页面，更丰富多彩的 展示超文本信息
1.2 css入门案例
1.4 css的代码规范
放置规范：
在<style>标签内容体中书写css样式代码。
<style>标签放置在<head>标签之中。
格式规范：
选择器名称{属性名1：属性值1；属性名2：属性值2；……}
选择器：即指定CSS样式作用在哪些HTML标签上
代码规范：
- 属性名和属性值之间是键值对关系；
- 属性名和属性值之间用":“连接，最后”;"结尾；
- 如果一个属性名有多个值，多个值之间用空格隔开
- CSS注释内容：
/*注释内容*/等同于java多行注释
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 边框属性
所有HTML标签都有边框，默认边框不可见
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
② 颜色代码 格式：#红绿蓝 每一个颜色用两个16进制位数表示
3.2 布局
3.2.1 float
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性
- 格式：
选择器{float:属性值;}
常用属性值：
none：元素不浮动（默认值）
left：元素向左浮动
right：向右浮动
注意：因为元素设置浮动属性后，会脱离原有文档流，从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整。
3.3 转换
3.3.1 dispaly
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素
-
块元素：以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行。
常见的块元素：<h1><p><div><ul>等 -
行内元素：根据内容多少来占用行内空间，不会自动换行
常见的行内元素：<span><a>等
display属性可以使得元素在行内元素和块元素之间相互转换。
-
格式：
选择器{display:属性值} -
常用的属性值：
block：此元素将显为块元素（块元素默认的dispaly属性值）
inline：此元素将显示为行内元素（行内元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间
3.4 字体
3.4.1 font-size
3.4.2 color
4.盒子模型
4.1 什么是盒子模型
所有的HTML元素，我们都可以看成一个四边形，即一个盒子。
用CSS来设置元素盒子的 内边距、边框、外边距 的样式的方式，
相当于设置盒子的样式，所以我们将其称之为 盒子模型
4.2 边框（border回顾及再阐述）
边框：HTML元素盒子的框体
边框有四个属性可以设置：
- border-top：上边框
- border-right：右边框
- border-bottom：下边框
- border-left：左边框
通用性设置：一次性设置上下左右边框样式
border:1px solid red;
4.3 内边距padding
内边距：HTML元素里的内容体到HTML元素边框的距离
内边距同样有四个属性可以设置：
- padding-top：上边距
- padding-right：右边距
- padding-bottom：下边距
- padding-left：左边距
通用性设置：
一次性设置上下左右内边距距离为10px
padding:10px
4.4 外边距margin
外边距：HTML元素边框到其他HTML元素边框的距离
同样四个属性
通用性设置
5.css和HTML的结合方式
5.1 内部样式
5.1.1 行内样式
行内样式，是通过标签的style属性来设置元素的样式。
格式：<html标签 style="css样式代码"/>
适用环境：更加针对性修改某个标签的样式
5.1.2 <style></style>标签方式
当某些样式在页面中被多个标签重复使用，为了编码更加灵活，避免书写重复代码，我们将样式代码从标签sytle属性中抽取出来，统一写入到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文件位置
适合不同页面进行样式复用
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
