【前端保姆级笔记】超详细的CSS笔记！！！（小柏出品）

B站关注帅小柏，点波关注不迷路！！！！

行内样式的书写规则
字体相关样式
- color
- font-size
- font-family
- - 中文字体：
  - 英文字体：
- line-height
- font-weight
- font复合样式
文本相关样式
- text-align
- text-decoration
- text-indent
盒模型
- width，height
- padding
- - padding的4种写法
- border
- - border-width
  - border-style
  - border-color
- `marign`
`CSS`书写位置
- 行内样式
- 内嵌样式
选择器
- 标签选择器
- id选择器
- 类选择器
- 后代选择器
- 交集选择器
- 并集选择器
CSS特性
- 继承性
- 层叠性

行内样式的书写规则

任意标签【容器、文本】都可以添加行内样式。上面写法、书写位置称之为行内样式。
每个样式后面记得 加分号。

<div  style="color: blueviolet;">早上好呀</div>
<p style="color: coral;">好好好好</p>
<a style="color: darkgreen; font-size:66px">哼哼哼哼哼哼哼哼哼哼</a>

效果：

早上好呀

好好好好

哼哼哼哼哼哼哼哼哼哼

字体相关样式

color

属性值由 英文单词 或者 十六进制数 组成
如果color样式的属性值为十六进制数字，切记以#号开头，分号结束。（不区分大小写）
第二种:rgb(red,green,blue)有三色素组成，红色部分三色素，需要的是0~255之间的数字
- 例如：color:rgb(255,0,0);

<div style="color: red;">早上好呀</div>
<div style="color: orange;">早上好呀</div>
<div style="color: yellow;">早上好呀</div>
<div style="color: green;">早上好呀</div>
<div style="color: cyan;">早上好呀</div>
<div style="color: blue;">早上好呀</div>
<div style="color:  purple;">早上好呀</div>
<div style="color: #e4e5;">早上好呀</div>

效果：

早上好呀

注意:一般情况下，一个样式只需要设置一次即可。如果设置多次。右侧覆盖左侧属性。

例：

<div style="color:red;color:green">这不是红色，会是绿色</div>

效果：

这不是红色，会是绿色

font-size

font-size :字体大小
- 属性值：加上px单位

<p style=”font-size:50px“>啦啦啦，我好大呀</p>

效果：

啦啦啦，我好大呀

百分比写法：
- 后代元素的字体大小，是祖先元素字体大小的多少倍。

#box{font-size :500%; // 是祖先元素的500倍
}

font-family

font-family : 设置文字的字体。（中文，英文）
font-family 属性值外层需要加上一对单引号。别给我正一双一单

p style="font-family:'方正粗黑宋简体','楷体'">我是祖国的老花骨朵</p>
font-family:可以同时设置多个字体，多个字体之间用逗号隔开，从左到右，前面字体设置覆盖后面字体设置。

中文字体：

浏览器默认字体是微软雅黑。

 <p>小柏最帅</p><p style="font-family: '微软雅黑';">小柏最帅</p><p style="font-family: '黑体';">小柏最帅</p><p  style="font-family: '楷体';">小柏最帅</p>

效果：

小柏最帅

英文字体：

<p style="font-family: 'Arial';">hello web</p>
<p style="font-family: 'Comic Sans MS';">hello web</p>
<p  style="font-family: 'webdings';">hello web</p>

效果：

hello web

line-height

作用：设置文字实体的行高度.

p{font-size;50px;line-height:100px;//line-height : 200%;
}
<p>啦啦啦</p>

font-weight

作用：字体加粗
属性值：数字(100~700之间) 也可以是英文**（normal 相对于默认数字400，bold 相当于数字700 ）**

p{font-weight : 700;// font-weight :bold;
}
<p>哈哈哈</p>

font复合样式

font是一个复合样式
组成
- font：
  - font-style 字体倾斜
  - font-weight 加粗
  - font-size ：字体大小
  - line-height ：行高
  - font-family : 字体设置

注：

font是上面五个属性简写方式。多个属性值之间用空格隔开。
只有字体倾斜、字体加粗的位置可以互换。但是其余三个位置书写不能互换。字体大小和行高之间用斜杠链接。|

p{font： italic bold 50px /300px ‘楷体’；
}

文本相关样式

文本：一个句子，一个段落，一个文章.

text-align

text-align: 水平对齐。
作用：设置文本的水平对齐方式。
属性值：英文单词。
- left ：左对齐（默认）
- center ：水平居中对齐
- right ：右对齐

p{width:400px;height :400px;border = 1px;text-align :center;
}
<p>哇嘎嘎嘎嘎嘎嘎</p>

text-decoration

作用：添加线条的修饰。
属性值：英文单词
- none ：无修饰
- overline ：文本上方有线条修饰。
- line-through : 线条贯彻文字（在文字中部）
- underline : 文本下方有线条修饰

<p style="text-decoration : none">哈哈哈哈嗝</p>
<p style="text-decoration : overline">哈哈哈哈嗝</p>
<p style="text-decoration : line-through">哈哈哈哈嗝</p>
<p style="text-decoration : underline ">哈哈哈哈嗝</p>

text-indent

含义：文本缩进。
作用：设置文本首行的缩进的距离。
属性值：两种。
- 像素单位: 比如 100px，代表文本首行向右缩进100像素。
- em 单位: 比如10em，代表文本首行向右缩进10个中文字符。

p{width:400px;height :400px;border = 1px;text-indent: 100px;<!--  text-indent: 2em;-->
}
<p>哇嘎嘎嘎嘎嘎嘎</p>

盒模型

盒模型有人也称之为‘框模型’，盒模型就是网页中的标签，在网页中实际占有区域而已。
盒模型是有五个样式组成:
- width ，height ，border , padding (内边界)，margin（外边界）。
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p7toaMRc-1631103934334)(C:\Users\86130\AppData\Roaming\Typora\typora-user-images\image-20210724163430813.png)]

<div style="background-color: aqua;width: 100px;height: 30px;padding:200px;margin:120px; border:20px solid red">小柏最帅</div>

效果：

小柏最帅

width，height

属性值：两种： 1. 像素形式 2. 百分之形式。

padding

padding 是一个复合样式。
- padding ：
  - padding-top ,
  - padding-right ,
  - padding-bottom,
  - padding-left.

p{padding-top:10px; padding-right:10px；padding-bottom：10px；padding-left：10px；
}
等价于：
p{padding ：10px 10px 10px 10px ；
}

padding的4种写法

如果是写4个值，分别代表着 上，右，下，左。
- ```
padding ：10px 10px 10px 10px ；
```
如果是写3个值，分别代表着 上，左和右，下。
```
padding ：10px 10px 10px ；
```
如果是写2个值，分别代表着 上下，左右。
```
padding ：10px 10px ；
```
如果是写1个值，分别代表着 上右下左。
```
padding ：10px ；
```

特殊情况

如果符合样式paddng 属性值书写完毕，在复合样式后面，如果在出现单一内边距样式出现。会覆盖前者内边距设置数据。

border

属性值﹔属性值是由三够分细成，三个属性值之间需要用空格隔开。
- 三个属性值分别是：
  - 边框的宽度。（例 10px）
  - 边框线条设置。（例：solid：实线）
  - 边框的颜色。
  （说明也是个复合样式）

border-width

可以设置4边，和padding一样 ,也有4种写法
```
padding ：10px 10px 10px 10px ；
```

border-style

和padding一样 ,也有4种写法
属性值： solid（实线）， dashed（虚线）
```
border-style:solid dashed solid solid ;
```

border-color

和padding一样 ,也有4种写法
```
border-color: red blue green red;
```

`marign`

作用：设置标签与标签之间的距离。
特点：不能显示内容，不能设置背景。
也是个复合样式，和padding 一样。

`CSS`书写位置

有三种：行内样式，内嵌样式，外链样式.

行内样式

<div style="color:red;font-size:50px;font-family:'楷体'">啦啦啦</div>

效果：

啦啦啦

内嵌样式

style 一般写在 head
type="text/css" 可写可不写。

<style  type="text/css">p{color:cyan;font-size:30px;}
</style><p id=“nq”>哈哈哈</p>
<div>嘻嘻嘻</div>
<div>呵呵呵</div>
<div>嘿嘿嘿</div>

选择器

选择器【英文】: selector
选择器:选择器是css(层叠样式）中一种模式，用来选择器给那些网页中的标签添加样式而已。
分类：
- 基础选择器: 标签选择器、id选择器、类选择器、通配符选择器。(4种）
- 高级选择器: 后代选择器、交集选择器、并集选择器。(3种)

标签选择器

选择器范围:网页当中同名标签都会添加样式。

<style  type="text/css">p{color:cyan;font-size:30px;}
</style><p>哈哈哈</p>
<p>嘻嘻嘻</p>
<p>呵呵呵</p>

id选择器

步骤：
- 第一步，给想要添加样式标签添加一个id属性。
- 第二步。在内嵌样式中，通过#+id属性值进行选择匹配。
id选择器范围: 当前这一个标签。
标签的id属性值写法: 首个字符必须是英文字母，后面的属性值可以是英文字母、数字、下划线。
每一个标签的D属性值务必唯一。(就和人的身份证是一样的，没人一个，相同)
Id属性值区分大小写。

<style  type="text/css">#nq{color:cyan;font-size:30px;}
</style><p id=“nq”>哈哈哈</p>
<div>嘻嘻嘻</div>
<div>呵呵呵</div>

类选择器

步骤：
- 第一步:给需要添加样式标签，添加一个class属性。
- 第二步:在内嵌样式中，通过.+标签的class的属性值。
选择范围:只要标签拥有class属性，且class属性值相同，就可以选择匹配上【哪怕标签类型不同】

<style  type="text/css">.cur{color:cyan;font-size:30px;}
</style>
<p class=“cur”>哈哈哈</p>
<div class="cur">嘻嘻嘻</div>
<div>呵呵呵</div>

后代选择器

如果你想给某一标签添加样式，先寻找他的祖先元素。
在书写内嵌样式的时候，从左到右一层一层寻找，直到找到要添加样式的标签。
而且需要注意，左侧的都是祖先标签的选择器，而且祖先标签的选择器之间用一个空格隔开，最右侧的这个选择器，是最终添加样式的标签选择器。

 <style type="text/css">div ul li p {color: cyan;font-size: 30px;}<!--**********亮点***************-->#list .cur p {color : green;}<!--*************************--></style><div><ul><li><p>哈哈哈哈</p><p>哈哈哈</p><p>哈哈</p><p>哈</p></li></ul></div><hr><ol id="list"><li class="cur"><p>哈哈哈哈</p><p>哈哈哈</p><p>哈哈</p><p>哈</p></li></ol>

交集选择器

一般情况下都是 标签选择器 和 类选择器 结合使用（标签选择器在前，类选择器在后，两者连着，不用空格）

   <style type="text/css">p.cur {color: cyan;font-size: 30px;}</style><div><h2 class="cur">我是二级标签</h2><p>我是小猫咪</p><p c class="cur">我是小可爱</p><p>我是小仙女</p></div>

并集选择器

用基础选择器用 ，（逗号）隔开。（最后面不需要加逗号）

  <style type="text/css">h2,p {color: cyan;font-size: 30px;}</style><div><h2>我是二级标签</h2><p>我是小猫咪</p><p>我是小可爱</p><p>我是小仙女</p></div>

CSS特性

特性：继承性，层叠性。

继承性

没有被选择器选中标签，可以继承祖先元素的文字样式。

 <style type="text/css">.box {color: cyan;font-size: 30px;background-color: rebeccapurple;}</style><div class="box"><h2>我是二级标签</h2><p>我是小猫咪</p><p>我是小可爱</p><p>我是小仙女</p></div>

层叠性

标签被多个选择器选中，添加相同样式
1. 在css 中权重高的选择器，会层叠掉权重低的选择器。
2. 基础选择器:
  在基础选择器中，根据选择器选择范围大小，划分权重，选择器选择范围越小，权重越高.
  
  ID选择器权重>类选择器权重>标签选择器权重>通配符选择器权重

  <style type="text/css">#box {color: cyan;font-size: 30px;background-color: rebeccapurple;}.cur {color: rebeccapurple;}p {color: rosybrown;}</style><P id="box" class="cur">我是小可爱</P>

如果是高级选择器，层叠的依据：
- 对比 id选择器的个数：
- 如果个数相同：继续比
  - ID选择器权重>类选择器权重>标签选择器权重>通配符选择器权重

标签没有被选择器选中，继承祖先元素的文字样式
- 后代元素可以继承祖先元素的文字样式。就近原则。（不用看选择器权重)

    #box {color: cyan;font-size: 30px;}#box .cur {color: rebeccapurple;}#box .cur #box1 {color: rosybrown;}</style><div id="box"><div class="cur"><div id="box1"><p>啦啦啦</p></div></div></div>

    }
</style>
<P id="box" class="cur">我是小可爱</P>


* 如果是高级选择器，层叠的依据：* 对比 id选择器的**个数**：* 如果个数相同：继续比* **``ID选择器权重>类选择器权重>标签选择器权重>通配符选择器权重``**-----------2. **标签没有被选择器选中，继承祖先元素的文字样式*** 后代元素可以继承祖先元素的文字样式。**就近原则。**（不用看选择器权重)```html#box {color: cyan;font-size: 30px;}#box .cur {color: rebeccapurple;}#box .cur #box1 {color: rosybrown;}</style><div id="box"><div class="cur"><div id="box1"><p>啦啦啦</p></div></div></div>

【前端保姆级笔记】超详细的CSS笔记！！！（小柏出品）相关推荐

从购买服务器到网站搭建成功保姆级教程~超详细
??从购买服务器到网站搭建成功保姆级教程~真的超详细,各位看官细品 ??前言 ??预备知识 ??什么是云服务器? ??什么是域名? ??什么是SSL证书? ??服务器选配 ??阿里云[官网链接](ht ...
虚拟机基础网络配置及其常见问题（保姆级！超详细）
一.网络配置 ###查看网卡 [root@node1 ~]# nmcli connection show NAME UUID TYPE DEVICE ens33 32255052-d10a-4b2b- ...
最全自建蚂蚁(leanote)笔记超详细步骤
服务器(Windows系统)自建蚂蚁(leanote)笔记超详细步骤(包含数据备份和数据还原) 需要依赖(工具) 轻量服务器(云服务器)一台 -- 环境Windows Server 2019 Mong ...
前端防抖与节流超详细讲解
前端防抖与节流超详细讲解前言防抖什么是防抖实现防抖函数节流什么是节流实现节流函数防抖与节流注意事项前言防抖与节流通常作为项目优化的手段,一般都是为了防止用户在短时间内快而频地多次操 ...
PHP取经（二）变量、标量、特殊类型、常量——超详细PHP学习笔记
初学小白超详细PHP学习笔记定义变量 PHP-变量名的命名规则变量的数据类型标量类型--布尔类型详述数据类型中的整型标量类型标量类型-浮点型标量类型-字符串当字符串中引号遇到美元咋办? ...
python超详细的常用笔记
关注微信公众号:(新生程序员教程) 下载python的word笔记,了解更多编程语言和程序员学习网站,学习平台目录第1章:Python的基础篇 1.1计算机的组成[了解] 1.2.计算机如何处理程 ...
CocosCreator像素鸟小游戏实现（有源码）超详细教程 TS实现小游戏零基础开发
CocosCreator像素鸟小游戏实现(有源码)超详细教程 TS实现小游戏大家中秋国庆快乐哈前言老规矩先看效果源码的获取方式在最下面对于本游戏来说canvas这样设置最佳哦游戏实现思路: ...
前端与后端的区别（保姆级整理-很详细-2021-05-26）
前言前端开发.后端开发分别是干什么的? 前端开发是做什么的? 后端开发是做什么的. 前端开发还是后端开发?如何抉择? 软件开发的完整流程什么是软件开发? 为什么要了解软件开发软件开发的完整过程: ...
Redis 超详细版教程笔记
视频教程:[狂神说Java]Redis最新超详细版教程通俗易懂视频地址:https://www.bilibili.com/video/BV1S54y1R7SB 目录索引 nosql 阿里巴巴架构演进 ...
STM32学习笔记(超详细)
查看全文 http://www.taodudu.cc/news/show-6770803.html 相关文章: STM32单片机学习笔记(超详细整理143个问题,学习必看) vsb asc_vsb电力 ...

【前端保姆级笔记】超详细的CSS笔记！！！（小柏出品）

B站关注帅小柏，点波关注不迷路！！！！

行内样式的书写规则

字体相关样式

color

font-size

font-family

中文字体：

英文字体：

line-height

font-weight

font复合样式

文本相关样式

text-align

text-decoration

text-indent

盒模型

width，height

padding

padding的4种写法

border

border-width

border-style

border-color

marign

CSS书写位置

行内样式

内嵌样式

选择器

标签选择器

id选择器

类选择器

后代选择器

交集选择器

并集选择器

CSS特性

继承性

层叠性

【前端保姆级笔记】超详细的CSS笔记！！！（小柏出品）相关推荐

最新文章

热门文章

`marign`

`CSS`书写位置