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

最新推荐文章于 2024-07-25 08:14:42 发布

帅小柏

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量1.2k

点赞数 7

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_46339668/article/details/120188096

版权

行内样式的书写规则

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

<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>

帅小柏

关注

7
点赞
踩
42

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端保姆级笔记】超详细的CSS笔记！！！（小柏出品）

B站关注帅小柏，点波关注不迷路！！！！行内样式的书写规则字体相关样式colorfont-sizefont-family中文字体：英文字体：line-heightfont-weightfont复合样式文本相关样式text-aligntext-decorationtext-indent盒模型width，heightpaddingpadding的4种写法borderborder-widthborder-styleborder-color`marign``CSS`书写位置行内样式内嵌样式选择器标签选择器id选择器类
复制链接

扫一扫