css知识点1小总结

小谭の努力

已于 2023-10-27 16:17:37 修改

阅读量2.5k

点赞数 11

文章标签： css 前端

于 2022-09-24 19:40:45 首次发布

本文链接：https://blog.csdn.net/weixin_57689217/article/details/127024538

版权

注意：建议有css基础

1.引入CSS样式

1.行内式

其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

案例：

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

注意：

- style其实就是标签的属性
- 样式属性和值中间是`:`
- 多组属性值之间用`;`隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余

缺点：

没有实现样式和结构相分离

2 内部样式(内嵌样式)

其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>

注意：

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type="text/css"  在html5中可以省略。
只能控制当前的页面

缺点：

没有彻底分离

3.外部样式(外链式)

其基本语法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

4 导入式

其基本语法格式如下：

@import url("css文件路径");

比前两中好，但一般就用第三种，因为这一种你可能都是第一次见

5 三种样式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

css 基础选择器

1.标签选择器

语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：

标签选择器 可以把某一类标签**全部**选择出来  比如所有的div标签  和 所有的 span标签

优点：

是能快速为页面中同类型的标签统一样式

缺点：

不能设计差异化样式。

2 类选择器

语法：

<style>
.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
</style>

<p class='类名'></p>

优点：

可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

注意

- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名， 尽量使用英文字母来表示。

给标签指定多个类名，从而达到更多的选择目的。
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">蒙多</div>
<div class="font20">压缩</div>
<div class="font14 pink">复仇之矛</div>
<div class="font14">圣枪游侠·奥巴马</div>

3 id选择器

语法格式如下：

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<p id="id名"></p>

元素的id值是唯一的，只能对应于文档中某一个具体的元素
用法基本和类选择器相同。
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
- 类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜
- id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

类选择器我们在修改样式中，用的最多。
id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。

4. 通配符选择器

语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

注意：常用类选择器，少用其他三种

一，常用样式-字体样式

font-size:大小

font-family:字体

列子：

p{ font-family:"微软雅黑";}

font-weight:字体粗细

代替了html中的b 和 strong 标签

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

font-style:字体风格

代替了 i 和 em 标签没说禁止（上下同）

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

简写：

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

二，常用样式-外观样式

1 color:文本颜色

作用：

color属性用于定义文本的颜色，
其取值方式有如下3种：

表示表示	属性值
预定义的颜色值	red，green，blue，还有我们的御用色 pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

注意

我们实际工作中，用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色

2.text-align:文本水平对齐方式

作用：

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
其可用属性值如下：

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

注意：

是让盒子里面的内容水平居中，而不是让盒子居中对齐

尺寸单位

单位为px

width : 宽高

height：高度

3 line-height:行间距

作用：

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
单位：
- line-height常用的属性值单位有三种，分别为像素px，相对值rem,em和百分比%,vh,vw，实际工作中使用最多的是像素px
技巧：

一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;

4 text-indent:首行缩进

作用：

text-indent属性用于设置首行文本的缩进，
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

5 text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

CSS 三大特性

1 层叠性

所谓层叠性是指多种CSS样式的叠加。

样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

2 继承性

概念：

子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是：子承父业。

注意：
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

3 CSS优先级

继承权重为 0 < 标签为 1 < class 10 < id 100<行内 1000 < !important 无穷大

复杂选择器

后代选择器空格
子代选择器大于号
兄弟选择器加号
群组选择器逗号
伪类选择器 hover 当鼠标移入标签时的样式
a 标签的链接样式：
:link
:hover
:active
:visited

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 */
        /* .father div{
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        /* 子代选择器 */
        /* .father>div{
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        /* 权重30 */
        .father .son .target{
            
            background-color: red;
        }
        /* 300  */
        #fat #son #tar{
            
            background-color: yellow;
        }
        /* 120 */
        #fat>.son>.target{
            
            background-color: green;
        }
        /* 120 */
        .father #son>.target{
            
            background-color: pink;
        }
        /* 3 */
        div>div>span{
            
            background-color: aqua;
        }
        
         /* 继承or*  0 < 标签 1 < class 10 < id 100 < 行内 1000 < ！important 无穷大 */
         
        /* 11 */
        div>div>div>div>div>div>div>div>div>div>div{ 
           
            background-color: yellow;
        }
         /* 10 */
         .shazi{
            
            background-color: red;
        } 
    </style>
</head>
<body>
    
    <div class="father" id="fat">
        <div class="son" id="son">
            <span class="target" id="tar">span</span>
        </div>
    </div>


    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div class="shazi">谁再问就是傻子</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

结果：
在这里插入图片描述

1. 盒子模型

概念：把每个标签当成一个纸盒看待，每个标签就会存在边框，内容，内边距，外边距

特点：
盒子模型是由内容（width,height）,边框，内边距，外边距组成
盒子本身的文字和图片等元素就是内容区域
盒子的厚度就是边框
盒子内容于边框的距离就是内边距
盒子与盒子之间的距离就是外边距

1.1 边框样式 border

border-width 定义边框粗细，单位px
border-style 定义边框样式
    可选值：none 默认值，没有边框
           solid 单实线 常用
           dashed 虚线
           dotted 点线
border-color 定义边框颜色 默认为黑色
border-radius 边框圆角

边框的简写

border : border-width border-style border-color

1.2 内边距 padding

盒子的边框到内容的距离就是内边距
padding-left
padding-right
padding-top
padding-bottom
单位都是数值设定距离

1.内边距会使盒子变大
内边距的简写

padding : 1个值   上下左右
          2个值   上下  左右
          3个值   上  左右  下
          4个值   上  右  下  左

1.3 外边距 margin

盒子的边框到内容的距离就是内边距
margin-left
margin-right
margin-top
margin-bottom
单位都是数值设定距离
外边距的简写

margin : 1个值   上下左右
          2个值   上下  左右
          3个值   上  左右  下
          4个值   上  右  下  左

1.4盒子模型的常见问题和解决方案

块级级盒子水平居中问题
必须满足的条件指定了宽度，将这个盒子左右margin设置为auto
文字居中和盒子居中
行内元素，行内块元素，文本在水平方向居中对齐text-align:center
跨级元素在水平方向居中对齐margin:auto
清除元素的默认内外边距（重要）
自带内外边距的标签：ul li ol dl dt dd p body
为了更灵活方便的控制网页的标签

    *{
        margin:0;
        padding:0;
    }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距

边距塌陷（外边距重合问题）
使用margin定义块元素的垂直外边距，可能会出现边距塌陷问题
①相邻块元素垂直外边距合并
当上下的两个块元素相遇时，如果上面的元素设置了margin-bottom
下面的元素有上外边距margin-top,则他们之间的垂直外边距不是margin-bottom+margin-top之和
取两值中的较大值作为中间的外边距，这种现象被称为边距塌陷
解决方案：尽量只给一个盒子设置margin
②嵌套块元素垂直外边距合并
对于两个嵌套关系的块元素，如果父元素没有上内边距和边框
父元素上外边距会和子元素上外边距发送合并，合并后的外边距时两者中较大值
**
解决方案：1.给父元素边框
2.给父元素内边距
3.给父元素overflow:hidden;
**

1.5 盒子模型的稳定性

优先使用宽度width > 内边距padding > 外边距margin

margin会有外边距合并问题，ie6下面的margin会有一个边距加倍的bug

w3c标准盒子模型中的宽高度计算：
宽度 = width + 左右border-width + 左右padding
高度 = height + 上下border-width + 上下padding

ie盒子模型（怪异盒模型）

1. 标签分类

行内标签

特点：和其他行内标签在同行显示，不支持宽高（css样式）

比如：a,b,s,u,i,font,sub,sup,span
块级标签

特点：独占一行，支持宽高（css样式）

比如：h1~h6,p,hr,div,li,ul,ol,dl,dd,dt
行内块标签

特点：同行显示，支持宽高

比如：img

小谭の努力

关注

11
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
css知识点1小总结

样式表优点缺点使用情况控制范围行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）
复制链接

扫一扫