css笔记一

(❁´◡双辞`❁)*✲ﾟ*

已于 2024-09-30 11:00:40 修改

阅读量963

点赞数 27

文章标签： css 笔记

于 2024-09-28 21:09:34 首次发布

本文链接：https://blog.csdn.net/qq_73986726/article/details/142618690

版权

一.css语法，选择器，文字属性

1.css代码空格规范：

2.css选择器分为基础选择器和复合选择器。

2.1css基础选择器

标签选择器，类选择器，id选择器，通配符选择器。

标签选择器：

缺点：不能设计差异化样式，只能选择全部的当前标签。

类选择器：

口诀：样式点定义，结构类class调用，一个或多个，开发最常用

1）

在这里插入图片描述

2）class=“类名

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

多类名：

id选择器：

口诀：样式#定义，结构id调用，只能调用一次，

1）

2）id=“id名”

例如

例如<div id="ming"> kihjkb<div>

通配符选择器：

2.2css复合选择器

常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等

后代选择器（重要）

空格

例如;

子选择器

大于号

并集选择器

逗号（和）

任何形式的选择器都可以作为并集选择器的一部分

伪类选择器

冒号

用于给某些选择器添加特殊效果。

链接伪类选择器

注意：1.冒号后没有空格

2.为了确保生效，应按照lvha的循顺序声明:link :visited :hover :active

3.开发中 :hover使用最多

结构伪类选择器

:focus伪类选择器

2.3复合选择器总结

3.css字体属性

3.1font-family

3.2font-size

3.3font-weight

lighter变细

3.4font-style

font：字体连写

3.6单行文字垂直居中

line-height=height;

行高小于盒子高度，文字偏上

行高大于盒子高度，文字偏下

4.css文本属性

4.1文本颜色color

十六进制中两两相同可以简写

例如：#666666简写为#666

ff00ff简写为f0f

开发中最常用十六进制

4.2对齐文本 text-align

注意：想要图片居中对齐，则是在他的父亲p标签中添加水平居中的代码

4.3装饰文本text-decoration

重点：添加下划线（常用），删除下划线（最常用）

4.4文本缩进text-indent

4.5行间距line-height

p { line-height: 1.2; } 上述代码将设置段落元素的行高为 1.2 倍字号大小

4.6文本属性总结

5.css引入方式

5.1内部样式（嵌入式）

5.2外部样式（链接式) 推荐

5.3行内样式（行内式）

二.css显示模式，背景

1.Emment语法

1.1快速生成html结构语法

补充：

.review默认生成<div class="reviw"></div>

（div标签）

p.review可以直接生成<p class="review"></p>

（其他标签同）

6示例：

7.示例：

1.2快速生成css样式

2.css元素显示模式

元素显示模式就是元素以什么方式进行显示。

html元素一般分为块元素和行内元素两种类型，还有一种特殊类型，行内块元素。

2.1块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素。

块级元素特点：

1.独占一行。

2.宽度默认100%。

3.是一个容器及盒子，里面可以放行内或块级元素。

注意

2.2行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>是最典型的行内元素。

行内元素特点：

⑤各元素之间有空白间隙.

注意

2.3行内块元素

常见的行内块元素有<img />,<input />,<td>,他们同时具有块元素和行内元素的特点。

特点：

2.4元素显示模式总结

2.5元素显示模式转换

1.display: block;

2.display: inline-block;重点

3.snipaste截图工具

4.css背景

4.1.背景颜色：background-color

默认值transparent(透明)

4.2.背景图片:background-image

默认平铺

4.3.背景平铺background-repeat

注意：页面元素既可以添加背景颜色也可以添加背景图片，但背景图片会压住背景颜色。

4.4背景图片位置background-position

4.5背景图片固定background-attachment

4.6背景复合写法

4.7.背景半透明

4.8背景总结

三. 三大特性，盒子模型，圆角阴影

1.css的三大特性

1.1层叠性

1.2继承性

可继承的css属性

不可继承的属性

1.3优先级

例如：1）

2）

2.盒子模型

border(边框），margin(外边框)，padding（内边框）。

2.1border(边框）

语法：

重要：solid:实线边框，dashed:虚线边框，dotted:点线边框

表格的细线边框

2.2边框会影响盒子实际大小

2.3内边距（padding)

(1).简写:

以上四种情况,开发中都会遇到。

(2).注意：

(3).解决方案：

(4).如果盒子本身没有指定width/height属性，则padding不会撑开盒子大小。

2.4外边距（margin)

也可简写，和padding一致。

1.外边距典型应用

margin: 0,auto;

注意：以上方法是让块级元素水平居中，行内元素或行内块元素居中需给其父元素添加text-align: center;

2.外边距合并

还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题，后续总结。

3.清除内外边距

这句话也是css的第一行代码。

注意：行内元素尽量只设置左右内外边距，不设置上下内外边距（设置也不起效）。但是转换为块级和行内块元素就可以了。

4.padding 和 margin 具体在什么场景下使用更合适？

padding和margin都是HTML/CSS用于控制元素边距的属性，它们的区别在于：

Padding（填充）：它是指元素内容周围的空白区域，通常会影响元素内部的内容布局。当你想要给元素内部分隔空间、防止文字和其他内容直接触碰到边框时，使用padding更为合适。例如，为了创建一个清晰的边距区，让图片四周留有空白。
Margin（外边距）：它是元素边界之外的空间，影响的是相邻元素之间的距离。当你需要控制元素与其他元素之间的间距，避免元素重叠时，应该使用margin。例如，要在网页上对齐一组同等大小的块级元素，可以设置相同的margin值使其自动堆叠。

在实际应用中，padding常用于调整元素内部结构的视觉效果，而margin则关注元素间的相互位置。当设计页面布局、组件样式或响应式设计时，会根据需要灵活选择和组合使用这两个属性。

3.ps基本操作

4.标签选用

比如：产品标题用h，大量文字段落用p

5.去掉li前面的项目符号（小圆点）

list-style: none;

6.圆角边框

border-radius属性用于设置元素的外边框圆角

语法：border-radius： length（数值）/百分比;

数值越大弧度越强烈。

6.1圆形的做法

1）设置一个正方形。

2）border-radios: 50%;即设置圆角为该正方形宽度和高度的一半。

6.2圆角矩形的做法

设置圆角为高度的一半。

6.3可以设置不同的圆角

也可以跟1个或2个或3个数值。

2个（代表：左上，右下；右上，左下）。

3个（代表左上角；右上角，左下角；右下角）

也可以只设置一个圆角

7.盒子阴影box-shadow

用box-shadow属性为盒子添加阴影

1）shadow

阴影会随着数值的变化在水平上移动。以盒子的位置为参照。

正值。随着数值的增大，阴影向右移动

负值。随着数值的缩小向左移动。

2）v-shadow

阴影在垂直上移动

数值变大向下移动，变小向上移动。

3）blur（影子是虚还是实）

4）spread（阴影大小）

8.文本阴影text-shadow

9.传统网页布局的三种方式

9.1普通流（标准流）

标准流是最基本的布局方式。

9.2浮动

浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动特性

例如：

注意：浮动元素是互相贴在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行显示。

例如：

4.如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给宽度和高度。

5.浮动元素经常与标准流父级搭配使用

注意:浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: antiquewhite
        }
        .box2 {
            /* float: left; */
            width: 200px;
            height: 100px;
            background-color: rgb(96, 203, 165)
        }
        .box3 {
            width: 100px;
            height: 200px;
            background-color: rgb(181, 55, 124)
        }

    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

只给盒子2添加左浮动后

清除浮动

缘由：由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

本质：

清除浮动策略：闭合浮动

清除浮动方法：

1.额外标签法

 <div class="box1">1</div>
    <div class="box2">2</div>
    <div style="clear: both;"></div>
    <div class="box3">3</div>

注意：要求这个新的空标签必须是块级元素

2.父级添加overflow属性

缺点：无法显示溢出的部分

3.父级添加after伪元素

:after方式是额外标签法的升级版。也是给父元素添加

1)首先在css样式中添加以下代码

 .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /*  IE6,7专有 */
            *zoom: 1;
        }

2）在html中找到浮动元素的父元素，调用类clearfix

4.父亲添加双伪元素

1）添加如下代码

 .clearfix:before,
 .clearfix:after {
     content: "";
     display: table;
 }
 .clearfix:after {
     clear: both; 
 }
 .clearfix {
     /*  IE6,7专有 */
     *zoom: 1;
 }

2）在html中找到浮动元素的父元素，调用类clearfix