CSS笔记

CSS

是用来设计网页样式的语言。

基本语法：

  • 由选择器和声明块组成
  • 每个声明包含一个CSS属性名称和一个值。
  • 多个CSS声明用；隔开，声明块用{}包裹

样式

内联样式

<p style="color: red;text-align: center">这是一段文字</p>

显示为红色居中的文字

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
    <style>
        body{
            background-color:purple ;
        }
        h1{
            color: blue;
            margin-left: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>这是一个标题</h1>
<p style="color: red;text-align: center">这是一段文字</p>

</body>
</html>

在原来的基础上添加了紫色的背景和蓝色距离左侧40px距离的标题

内部样式表处于head双标签内部

弊端：

  • 只能作用于一个页面，不能实现多个页面共享一个样式
  • 当页面元素较多时不方便添加

外部样式

将CSS放到独立的.CSS文件中，将HTML文件和CSS完全独立开来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部CSS</title>
    <link rel="stylesheet" href="SecondCSS.css">
</head>
<body>
<h1>这是一个标题</h1>
<p >这是一段文字</p>
</body>
</html>

SecondCSS.css里面放的就是之前的内部样式表

优先级：

  • 内联样式优先级最高，会覆盖外部样式和内部样式以及浏览器默认样式
  • 在head里添加的内部样式和引入的外部样式，后添加和引入的优先级高
  • 浏览器默认样式优先级最低

选择器

简单选择器

  • id选择器：#id{样式}，标签的id不能以数字开头
  • class选择器: （标签类型）.class{样式}，标签的class属性也不能以数字开头，一个标签可以有多个class，如class：“class1 class2”，
  • 分组选择器：类型1，类型2
  • 通用选择器：*{样式}，选择页面上的所有元素

优先级：行内样式>ID选择器>类选择器>元素选择器>通用选择器

如果多个选择器指向一个标签，则权重大的优先级高

优先级：

选择器 例子 权重值
1 通用选择器 * 0
2 元素选择器 h1,div,p 1
3 类选择器 .active,.light 10
4 ID选择器 #box,#btn 100
5 行内选择器 <h1 style="..."+> 1000

组合选择器

  • div p：后代选择器，选择div内的所有p元素。
  • div>p：子选择器，选择父辈为div的p元素。只能选择作为某元素的子元素，不能选择到孙辈的元素
  • div+p:相邻的兄弟选择器
  • div~p：一般兄弟选择器

伪类选择器

属于类选择器中的一种，根据特定状态选取元素

selector:鼠标行为{样式}

鼠标行为：

  • :link 鼠标点击前，即默认状态
  • :visited 鼠标点击后，即点击后鼠标离开文字后
  • :hover 鼠标悬停时
  • :active 鼠标点击时，点击瞬间的状态

四个伪类选择器必须按照:link,:visited,:hover,:active的顺序书写，否则在浏览器中部分样式不能实现。

伪类选择器全部一起使用的情况，主要是应用在超链接上，偶尔也会独立使用在其他标签上。应用在其他元素上时只能实现active激活瞬间和hover鼠标悬停效果。

伪元素选择器

可以设置元素指定部分的样式。主要用来设置元素内文本的首字母，首行的样式、或是在元素内容之前或之后插入其他内容。

selector::pseudo-element{样式}

其中selector是选择的元素

pseudo-element是向目标元素内添加伪元素，并对添加的内容进行修饰，有五种：

  • ::first-letter 选择文本首字母 例如：div::first-letter
  • ::first-line 选择文本首行 使用同上
  • ::before 选择文本前 ，必须要有content，例如：div::before
  • ::after 选择文本后 使用同上
  • ::selection 选中文本时的样式，只支持color（颜色），background（背景），cursor（鼠标样式），outline（描边效果）

属性选择器

根据属性或属性值查找元素

基本语法：Element[attribute]或Element[attribute="value"]

其四种属性：

  • [attribute] 来查找HTML结构中，带有attribute属性的所有元素
  • [attribute="value"] 带有attribute属性且值为value的元素
  • [attribute~="value"] 带有attribute属性且在多个属性值中包含value的元素
  • [attribute|="value"] 带有attribute属性且属性值以value或者value-开头的元素，此处value只能有一个

总结：

  • 简单选择器和组合选择器，可以完成元素的查找
  • 其他选择器可以更加精确高效的查找元素，从而能提高我们编码速度。
  • 属性选择器，在实际开发过程中，大部分会应用在表单控件中，因为表单控件可添加的属性比较多。

文本

颜色和大小写转化

color颜色变化，三种值：RGB颜色值，十六进制颜色值，颜色名称

大小写转换：text-transform:方式

三种方式:

  • uppercase:文本转换为大写
  • lower case:文本转换为小写
  • capitalize:每个单词的首字母被转换为大写

对中文无效，仅对英文有效

对齐和间距

对齐：text-align:方式

四种方式：

  • left:水平居左
  • right:水平居右
  • center:水平居中
  • justify:每一行都有相同的宽度，左右边界相同

vertical-align:方式

五种方式：

  • baseline:基线对齐
  • text-top:文本顶部对齐
  • text-bottom:文本底部对齐
  • sub:下角标对齐
  • super:上角标对齐

间距：

  • 文本缩进：text-indent:距离，距离值绝对单位px，相对单位em，一般2em

  • 中文文字或英文字母之间的空隙：letter-spacing

  • 行高：line-height,为基线的距离，值有3种

    ①normal，浏览器会根据字符大小自动设置一个行高

    ②一个数字，此数字与当前字符大小相乘计算

    ③绝对值，例如20px，设置固定的行间距

  • 单词间距：word-spacing只对英文有效

  • 如何处理元素内部的空白：white-space，值：nowrap，不管文本元素宽度是多少，文本都不会换行，直到遇见br标签为止

修饰

装饰线：text-decoration-line，如果要添加多条只需要空格分隔即可，如text-decoration-line:overline line-through

值：overline在文本上方添加

line-through在文本中间添加线条修饰

underline在文本下方添加线条修饰

装饰线的颜色：text-decoration-color

装饰线风格：text-decoration-style

值:solid实线

double双实线

dotted圆点线

dashed虚线

wavy波浪线

线条厚度：text-decoration-thickness

值：auto默认值

px像素大小，是一个绝对值

%是一个相对值，根据修饰文字的高度计算出来

修饰线的属性可以简写为：text-decoration: underline red double 5px;没有顺序要求，但line的值必须设置

超链接会自动添加下划线，如果想隐藏：text-decoration: none；

字体和字号

字体：font-family：字体名称

英文字体类型：

  • Serif 正式、优雅
  • Sans-serif 现代、简约
  • Monospace 等宽、机械的外观，一般在代码编辑器中使用
  • Cursive 草书
  • Fantasy 装饰性、娱乐性字体

中文字体：需要浏览者的电脑中安装该字体才能使用，可以在设置字体前面加“其他字体”作为备用字体

  • Microsoft Yahei 微软雅黑，Windows系统
  • PingFang SC 苹方简，Mac系统

字号：font-size，不设置字体大小时，继承祖先元素的大小，如果祖先元素也没有设置大小，则会使用浏览器的默认大小16px

绝对大小：px

相对大小：em，子元素值 2em=2*16（父元素值）=32px

相对大小也可以使用%来计算，它相对于父元素的大小来计算尺寸

相对根元素大小：rem，html页面中的根元素就是html元素

字体风格和样式简写

风格：

​ 斜体：font-style:显示方式

​ 值：

  • normal 正常显示
  • italic 文本斜体显示
  • oblique 与italic相似，但支持度较低

​ 字体粗细：font-weight:粗细名称/数值

​ 值：

  • lighter 细体，对应100
  • normal 正常字体，对应400
  • bold 加粗字体，对应700
  • bolder 更粗字体，对应900
  • 100、200···900 值越大文本越粗

​ 小型大写字母：font-variant:值 即是否以小一号的大写字母显示

​ 值：

  • normal 正常
  • small-caps 小型大写状态

简写：font: oblique 100 samll-caps 30px/30px 华文仿宋，其中font-size和font-family是必须的，即后两项

谷歌字体和Icon图标

谷歌字体：用户电脑无需有该字体也能使用

在使用之前需要引用：在head标签内添加link标签 其属性：rel="stylesheet" href="https://fonts.googleapis.com/css?family=字体1|字体2|···&effect=样式1|样式2|···"

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
    <style>
        h1{
            font-family: Sofia;
        }
    </style>
</head>
<body>
<h1 class="font-effect-fire">
    谷歌字体及样式测试
</h1>
</body>
</html>

Icon图标：可以当做文本，任意的添加样式

使用前需要在head标签内添加：

<script src="https://kit.fontawesome.com/3eadf64e23.js" crossorigin="anonymous"></script>

使用范例：

<i class="fas fa-heart" style="color: red"></i>

添加了一个红色的心型

获取图片内的宽高、背景颜色和文字大小

  1. 用QQ截图需要获得的图片
  2. 使用在线PShttp://ps.gaoding.com/创建画布并粘贴图片
  3. 使用选框工具获取宽、高和文字大小
  4. 使用吸管工具获取颜色

边框

设置边框类型 border-style:类型

还可以只设置一个方向的边框类型，例如右边框 border-right-style:类型

混合边框简写：border-style：类型1 类型2 类型3 类型4 ，分别代表上右下左的类型

三个值代表上、左右、下的类型，两个值则是上下、左右的类型

值：

  • dotted：定义一个点状边框
  • dashed：定义一个虚线边框
  • solid：定义一个实线边框
  • double：定义一个双倍的边框
  • none：定义无边框
  • hidden：定义一个隐藏的边框

none和hidden区别在于相邻边框都设置类型时，优先级：hidden>solid>none

边框宽度：border-width:值

值：

  • px，em
  • thin：薄
  • medium：中
  • thick：厚

混合简写方式 同 类型混合简写。

border-color：边框颜色

除了名称、十六进制颜色值、RGB颜色值外，还可以使用transparent来设置为透明

混合简写方式同上。

速记属性：border:border-width border-style border-color

其中border-style是必须的，其他默认为1px 黑色

定义某一条边，例如右边框：border-right：border-width border-style border-color

列表

列表项

list-style-type:类型

值：

  • circle 空心圆
  • disc 实心圆
  • square 方形
  • decimal 数字
  • upper-roman 罗马数字
  • lower-alpha 小写字母
  • none 隐藏

list-style-image: url(图片路径);以一个图片作为列表项

list-style-position:类型，设置列表项的位置

值：

  • outside 在列表之外
  • inside 在列表之内

速记：list-style: list-style-type list-style-position list-style-image

列表颜色

background:颜色

添加到ol或ul的属性都会影响整个列表，而添加到li标签的属性只会影响单个列表项

背景

background-image: url(图片路径)

默认为平铺的方式展示

如果想取消平铺：background-repeat:no-repeat；

background-color:颜色

透明度：值为rgba(0,0,0,0.5)时为黑色，透明度为0.5

背景的对齐方式

background-position:水平对齐方式 垂直对齐方式；

水平对齐方式：left，center，right

垂直对齐方式：top，center，bottom

背景图片与图片的依附方式

background-attachment:方式

值:

  • fixed:图片固定
  • scroll:同时滚动

用于实现视觉差效果

background-size: cover使背景铺满整个容器

速记：background: color image repeat position attachment

精灵图：在一张图片中陈列所使用的小图片，使用时只调用此图片并进行偏移得到所需小图片

轮廓

轮廓是边框外面的一层

轮廓样式：outline-style

值：

  • dotted 点
  • dashed 虚线
  • solid 实线
  • double 双实线
  • none 无
  • hidden 隐藏

轮廓颜色：outline-color

轮廓宽度：outline-width

值：

  • thin 1px
  • medium 3px
  • thick 5px

轮廓偏移：outline-offset

轮廓速写：outline: width style color

边距

上 margin-top:

右 margin-right:

下 margin-bottom:

左 margin-left:

值：

  • auto 浏览器自动计算的边距
  • px，pt，cm等
  • % 以父元素宽度的百分比来指定边距

垂直方向上两个元素都设置边距，取大的值

填充

padding：四个方向分别的值

值：

  • px，pt，cm等
  • % 父元素宽度的百分比

盒模型

标准盒模型

由内容content，填充padding，边框border，边框外的区域margin

为了布局的精确，需要计算盒子的宽度=内容宽度+左右填充+左右边框+左右边距

在设置一个元素的宽度和高度时，只是设置了内容content区域的大小，要精确计算大小需要将填充、边框和边框外的区域大小都算上。

怪异盒模型

box-sizing=border-box

在设置了边框和填充后，元素大小不变，会自动压缩内容区域的大小

显示属性

display：

值：

  • inline 一行显示
  • block 块显示
  • none 隐藏
  • inline-block 将块元素在同一行显示

补充：visibility: hidden 也能隐藏元素，但是布局不会改变，其占据的空间还在，显示则将值改为visible

特点：

  • 行内元素不能设置宽高样式，可以设置边框线样式，内填充样式，左右方向的外边距样式
  • 块元素可以设置盒模型的全部样式
  • 行内元素内不能包含块元素
  • 有几个特殊的块级元素只能包含行内元素：h1-h6,p,dt。

溢出处理

采用overflow设置当元素内容溢出时如何处理

值：

  • visible 默认，溢出的内容不会被剪掉
  • hidden 溢出的内容被剪切
  • scroll 溢出的内容通过滚动条显示

text-overflow：ellipsis；文本溢出时通过...显示

浮动基础

可以脱离文档流，与其他元素重叠

float：方式

值：

  • left 左浮动
  • right 右浮动
  • none 无

清除浮动影响：哪个元素不希望被影响就给它加上clear

值：

  • left 当前元素不受左浮动影响
  • right 当前元素不受右浮动影响
  • both 当前元素既不受左浮动影响，又不受右浮动影响

元素定位

position:定位方式，需要配合left、top、right、bottom这些定位属性才能生效

定位方式的值：

  • static 静态定位
  • relative 相对定位，相对的是屏幕坐标0,0点，容器发生位移后，原来占据的空间依然保留，默认会覆盖没有定位的容器
  • fixed 固定定位，相对于浏览器视口定位，页面发生滚动它也保持在同一位置
  • absolute 绝对定位，脱离文档流，参照点为有定位设置的离他最近的祖先元素的0,0坐标，默认情况下参照点是body元素的坐标起始点，默认会覆盖没有定位的容器
  • sticky 粘性定位，仅在其父元素内生效，父元素高度不能低于sticky定位元素的高度，且父元素不能添加overflow：hidden或overflow：auto

叠加顺序：z-index:数值，值大的在上面，但是子容器是不会超出父容器的堆叠顺序的，比较的是同级容器

宽高自适应

元素的宽可以根据屏幕大小变化而变化

width和height设置为百分比，即可自适应变化

max-width和min-width可以设置自适应变化的大小的上下限，高度也可以max-height设置

数学函数calc

可以让数学运算符作为值使用：例如width: calc(100%-100px)

posted @   西瓜星冰乐  阅读(37)  评论(0)  编辑  收藏  举报
相关博文：
· html笔记
· java基础笔记
· CSS基础
· 【11.0】前端基础之阶段性复习
· CSS层叠样式表
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae