CSS略详细的基础助你一臂之力

CSS基础

1.CSS是什么？
2. 基本语法规范
3.引入方式
- 3.1 内部样式表
- 3.2 行内样式表
- 3.3 外部样式
4.代码风格
- 4.1 样式大小写
- 4.2 空格规范
- 4.3 选择器
- - 4.3.1选择器功能
  - 4.3.2 选择器种类
5.常用元素属性
- 5.1 字体属性
- - 5.1.1 设置字体
  - 5.1.2 大小
  - 5.1.3粗细
  - 5.1.4 文字样式
- 5.2 文本属性
- - 5.2.1 文本颜色
  - 5.2.2 文本对齐
  - 5.2.3文本装饰
  - 5.2.4文本缩进
  - 5.2.5行高
- 5.3背景属性
- - 5.3.1 背景颜色
  - 5.3.1 背景图片
  - 5.3.2 背景平铺
  - 5.3.3背景位置
  - 5.3.4 背景尺寸
6.圆角矩形
- 6.1 基本用法
- 6.2 生成圆形
- 6.3 生成圆角矩形
7.元素的显示模式
- 7.1 块级元素
- 7.2行内元素/内联元素
- 7.3 行内元素和块级元素的区别
- 7.4 改变显示模式
8.盒模式
- 8.1 元素的宽度和高度
- 8.2 边框
- - 8.2.1 基础属性
  - 8.2.2 内边距
  - 8.2.3 外边距
9.弹性布局
- 9.1 flex布局基本概念
- 9.2 常用属性
10.大彩蛋

1.CSS是什么？

层叠样式表
CSS能够对网页中的元素位置的排版进行像素级精确控制，实现梅花页面的效果，能够做到页面的样式和结构分离

2. 基本语法规范

选择器 + {一条 / n条声明}

选择器决定针对谁修改
声明决定修改啥
声明的属性是键值对.使用；区分键和值

<style>
p{/*设置字体颜色*/
color:red;
/*设置字体大小*/
font-size: 30px;
}
</style>
<p> hello </p>

注意：

css要写到style标签
style标签可以放到页面任意位置，一般放到 head 标签内
css使用/* …*/ 作为注释

3.引入方式

3.1 内部样式表

写到 style中，嵌入到 html 内部
优点：这样做可以让样式和页面结构分离
缺点：分离的不够彻底，尤其是css内容多的时候

3.2 行内样式表

通过style属性，来指定某个标签的样式
只适合于写简单样式，只针对某个标签生效

<style>
div{color:red;
}
</style>
<div style="color:green">黎博云我喜欢你<div>

3.3 外部样式

1.创建一个css文件
2.使用link 标签引入css

<link rel="stylesheet" herf="[css文件路径]">

创建demo.html

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部样式</title><link rel="stylesheet" href="style.css">
</head>
<body><div>遇见就是幸运</div></body>

创建 style.css

div {color:red;
}

不要忘记link标签调用CSS，否则不生效
优点：样式和结构彻底分离
缺点：收到浏览器缓存影响，修改之后不一定生效

4.代码风格

1.紧凑风格

p  { color: red; font-size:30px}

2.展开风格

p{color: red;
font-size:30px;
}

4.1 样式大小写

虽然css不区分大小写，开发时统一使用小写

4.2 空格规范

1.冒号后面带空格
2.选择器和 { 之间也有一个空格

4.3 选择器

4.3.1选择器功能

CSS选择器用于选择你想要的元素的样式的模式。

4.3.2 选择器种类

基础选择器小结

5.常用元素属性

5.1 字体属性

5.1.1 设置字体

body{font-family:'微软雅黑';font-family:'Microsoft YaHei';}

字体名称可以用中文，但是不建议
多个字体之间使用逗号分隔
如果字体名有空格，使用引号包裹
建议使用常见字体，否则兼容性不好

<style>.font-family .one {font-family: 'Microsoft YaHei';}.font-family .two {font-family: '宋体';}
</style>
<div class="font-family"><div class="one">这是微软雅黑</div><div class="two">这是宋体</div></div>

5.1.2 大小

p{font-size：20px；
}

不同浏览器默认的字号不一样，最好给一个明确值
可以给body标签使用 font-size
要注意单位px 不要忘记
标题标签需要单独指定大小

<style>.font-size .one {font-size: 40px;}.font-size .two {font-size: 20px;}
</style>
<div class="font-size"><div class="one">大大大</div><div class="two">小小小</div></div>

5.1.3粗细

p {font-weight: bold;font-weight: 700;}

可以使用数字表示粗细
700 == bold
400是不变粗
==normal
取值范围是 100 ->900

<style>.font-weight .one {font-weight: 900;}.font-weight .two {font-weight: 100;}
</style>
<div class="font-weight"><div class="one">粗粗粗</div><div class="two">细细细</div></div>

5.1.4 文字样式


```css
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

5.2 文本属性

5.2.1 文本颜色

255.255.255表示白色
0.0.0.0 表示黑色
设置文本属性

color : red;
color ： #ff0000;
color : rgb(255,0,0);

color属性值的写法：

预定义的颜色值
最常用十六进制形式
RGB 方式

<style>.color {color: red;/* color: rgb(255, 0, 0); *//* color: #ff0000; */}
</style>
<div class="color">这是一段话</div>

5.2.2 文本对齐

text-align:[值]

center：居中对齐
left ：左对齐
right：右对齐

<style>
.text-align . one{text-align : left;}.text-align . one{text-align : center;}.text-align . one{text-align : right;}</style><div class="text=a;ign"><div class="one">左对齐</div><div class="one">右对齐</div><div class="one">居中对齐</div>  </div>

5.2.3文本装饰

underline 下划线.[常用]
none 啥都没有
overline 上划线，不常用
line-through 删除线不常用

    <style>.text-decorate .one{text-decoration: none;}.text-decorate .one{text-decoration: underline;}.text-decorate .one{text-decoration: overline;}.text-decorate .one{text-decoration: line-through;}</style><div class="texe-decorate"><div class="one">啥都没有</div><div class="two">下划线</div><div class="three">上划线</div><div class="four">删除线</div></div>

5.2.4文本缩进

控制段落的首行缩进（其他行不影响）

text-indent:[值]

单位可以使用 px 或者 em
使用em作为单位更好， 1个 em 就是当前元素的文字大小
缩进可以是负的，表示往左缩进

<style>.text-indent .one {text-indent: 2em;}.text-indent .two {text-indent: -2em;}
</style>
<div class="text-indent"><div class="one">正常缩进</div><div class="two">反向缩进</div></div>

5.2.5行高

行高是指上下文本行之间的基线距离

顶线
中线
基线
底线

内容区：底线和顶线包裹的区域

基线之间的距离=顶线间距离=底线间距离=中线间距离
注意：
1.行高 = 上边距 + 下边距 + 字体大小
2.行高也可以取 normal 值
3.行高等于元素高度，就可以实现文字居中对称

5.3背景属性

5.3.1 背景颜色

backgroud -color：[指定颜色]

默认是 transparent（透明），可以通过设置颜色的方式修改

<style>body {background-color: #f3f3f3;}.bgc .one {background-color: red;}.bgc .two {background-color: #0f0;}.bgc .three {/* 背景透明 */background-color: transparent;}
</style>
<div class="bgc"><div class="one">红色背景</div><div class="two">绿色背景</div><div class="three">透明背景</div>
</div>

5.3.1 背景图片

background-image:url(...)

url不要遗漏
url 可以是绝对路径，也可以是相对路径
url 上可以加引号，也可以不加

<style>.bgi .one {background-image: url(rose.jpg);height: 300px;}
</style>
<div class="bgi"><div class="one">背景图片</div>
</div>

5.3.2 背景平铺

background-repeat:[平铺方式]

repeat：平铺
no-repeat：不平铺
repeat-x ：水平平铺
repeat-y ：垂直平铺

<style>.bgr .one {background-image: url(rose.jpg);height: 300px;background-repeat: no-repeat;}.bgr .two {background-image: url(rose.jpg);height: 300px;background-repeat: repeat-x;}.bgr .three {background-image: url(rose.jpg);height: 300px;background-repeat: repeat-y;}
</style>
<div class="bgr"><div class="one">不平铺</div><div class="two">水平平铺</div><div class="three">垂直平铺</div>
</div>

5.3.3背景位置

background-position: x y;

参数有三种风格

方位名词（top, left,right,bottom）
精确单位：坐标或者百分比
混合单位：同时包含方位名词和精确单位

5.3.4 背景尺寸

background-size : length| percentage |cover|contain

1.可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
2.也可以填百分比: 按照父元素的尺寸设置.
3.cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4.把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

<style>.bgs .one {width: 500px;height: 300px;background-image: url(rose.jpg);background-repeat: no-repeat;background-position: center;background-size: contain;}
</style>
<div class="bgs"><div class="one">背景尺寸</div>
</div>

6.圆角矩形

6.1 基本用法

board - radius：length;

length 是内切圆的半径，数值越大，弧线越强烈

div {width: 200px;height: 100px;border: 2px solid green;border-radius: 10px;}

6.2 生成圆形

让 border-radius 的值为正方形宽度的一半即可

div{width :200px;
height :200px;
border: 2px soild green;
border-radius: 100px;
border-radius: 50%;

6.3 生成圆角矩形

让border-radius 的值为矩形高度的一半即可

div{width: 200px;height: 100px;border: 2px solid green;border-radius: 50px;}

7.元素的显示模式

kuaijiyuansu
行内元素

7.1 块级元素

独占一行
高度，宽度，内外边距，行高都可以控制
宽度默认是父级元素宽度的100%
是一个容器（盒子），里面可以放行内和块级元素

注意：

文字类元素不能使用块级元素
p标签主要用于存放文字，内部不能放块级元素，尤其是div

7.2行内元素/内联元素

a
strong
b
em
i
del
s
ins
u
span
...

不独占一行，一行可以显示多个
设置高度，宽度，行高无效
左右外边距有效（上下无效），内边距有效
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素，不能放块级元素

<style>.demo2 span {width: 200px;height: 200px;background-color: red;}
</style>
<div class="demo2"><span>child1</span><span>child2</span><span>child3</span>
</div>

注意
1.a标签中不能再放a标签
2.a标签李可以放块级元素，但是更建议先把a转换成块级元素

7.3 行内元素和块级元素的区别

块级元素独占一行，行内元素不独占一行
块级元素可以设置宽高，行内元素不能设置宽高
块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置

7.4 改变显示模式

使用display属性可以修改元素的显示模式

display： block 改成块级元素
display：inline 改成行内元素
display：inline-block 改成行内块元素

8.盒模式

每一个HTML元素就相当于是一个矩形的盒子

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) ：清除边框外的区域，外边距是透明的。
Border(边框) ：围绕在内边距和内容外的边框。
Padding(内边距) ：清除内容周围的区域，内边距是透明的。
Content(内容) -：盒子的内容，显示文本和图像。

8.1 元素的宽度和高度

当指定一个CSS元素的宽度和高度属性的时候，你只是设置内容区域的宽度和告诉。完整大小的元素，必须添加内白那句，边框和外边距

div {width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
}

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

8.2 边框

8.2.1 基础属性

粗细： border-width
样式： border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color

<div>test</div>
div {width: 500px;height: 250px;border-width: 10px;border-style: solid;border-color: green; }

8.2.2 内边距

padding 设置内容和边框之间的距离

padding-top
padding-bottom
padding-left
padding-right

div{height : 200px;
width: 300px;
padding-top:5px;
padding-left: 10px;}

8.2.3 外边距

控制盒子和盒子之间的距离
可以给四个方向都加上边距
margin-top
margin-bottom
margin-left
margin-right

div {background-color: red;width: 200px;height: 200px; }

9.弹性布局

9.1 flex布局基本概念

基础概念‘

被设置为 display：flex 属性的元素称为flex container
他的所有子元素里可称为了该容器的成员称为flex item
flex item 可以纵向排列，也可以横向排列，称为flex

注意
当父元素设置为 display：flex 之后，子元素float，clear，vertical-align都会失效

9.2 常用属性

10.大彩蛋

https://www.runoob.com/cssref/css-reference.html
大家可以在这里学习CSS的参考手册
感谢观看，最近着实是有点偷懒而且没有状态，我会努力努力持续加更，感谢各位同胞的支持!!! 你们的支持是我学习的最大的动力