CSS笔记（一）

最新推荐文章于 2024-10-18 18:01:20 发布
最新推荐文章于 2024-10-18 18:01:20 发布
阅读量307 收藏 7
点赞数 2
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzbmc/article/details/103564871
版权

CSS

参考：CSS 教程

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中

二、CSS的使用

1.基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。多条声明由分号隔开。
在这里插入图片描述

2.使用方法

2.1 插入样式表的方法有三种

  • (1)内联样式（行内样式，在 HTML 元素内部）
    在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
    请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
  • (2)内部样式表（页内样式，位于 head 标签内部）
    使用 <style> 标签在文档头部定义内部样式表
<head>
	<style>
		hr {color:sienna;}
		p {margin-left:20px;}
		body {background-image:url("images/back40.gif");}
	</style>
</head>
  • (3)外部样式表 （单独css文件，HTML使用需要用link标签）
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

注意：

  • 不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px”
  • 如果你使用了外部文件的样式在内部样式中也定义了该样式，则内部样式表会取代外部文件的样式。

2.2 优先级顺序

优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
（精确的覆盖不精确的）
1.通用选择器（*）
2.元素(类型)选择器
3.类选择器（.）
4.属性选择器（*[]）
5.伪类
6.ID 选择器（#）
7.内联样式

三、CSS选择器

1. 标签（元素/类型）选择器

例如：

html {color:black;}
p {color:gray;}

2. 类（class）选择器 （.）

.cls1 {color:black;}

3. ID选择器（#）

在JS更常用。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
ID不能重名。

ID选择器与类选择器的区别

ID：html不允许有相同id
类：可以为多个元素设置同一个类

  • 相同点：可以应用于任何元素
  • 不同点：
    1、在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
    2、可以使用类选择器词列表方法（class=“ltd label”）为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

4. 属性选择器（*[]）

可以根据元素的属性及属性值来选择元素。
例如：给含有type属性的标签边框加粗

主要：
*[属性名]{}
*[属性名=属性值]{}
标签名[属性名=属性值]{}

4.1 简单属性选择

  • （1）给所有具有某属性的元素设置样式
*[title] {color:red;}
  • （2）具体某个属性值设置样式
*[type=text] {color:red;}
  • （3）对含有某属性的某类元素设置样式
    某标签（a）使用某属性（title）的进行设置：
a[title] {color:red;}
  • （4）对含有多个属性的元素设置样式
    例如：既含有title又含有id
*[title] [id]{color:red;}  或 a[title][id] {color:red;}

4.2. 根据属性值选择

<a href="https://www.w3school.cn/" title="W3School">W3School</a>
<a href="https://www.w3cschool.cn/css/" title="CSS">CSS</a>
<a href="https://www.w3cschool.cn/html/" title="HTML">HTML</a>

（1）根据单个属性值设置元素样式

a[href="https://www.w3cschool.cn/css/"] {color: red;}

（2）可以按多个属性值设置元素样式

a[href="https://www.w3school.cn/"][title="W3School"] {color: red;}

（3）属性选择器参考手册
在这里插入图片描述

5. 后代选择器（空格）

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
例如：table后代中的所有td进行设置

table td {
	padding: 20px;
	border: solid 1px red;
}

6. 子元素选择器（>紧挨着）

与后代选择器相比，子元素选择器只能选择元素的直接子元素。（紧跟着的元素，不能被隔开）
比如：table > tr{} 或者tr > td{} ，但是不能table > tb

7. 相邻兄弟选择器（+）

<input id="btnSubmit" type="submit" value="注册" />
<input type="reset" value="取消" />

对取消按钮添加背景色：

#btnSubmit + input{
	background-color: yellow;
}

8. 通用选择器（*）

四、样式

1. 背景

1.1 背景色（background-color）

table{background-color: pink;}

1.2 图片背景（background-image:url()）

基本使用
body {background-image: url(/i/eg_bg_04.gif);}

这个图片过大只显示部分图片，图片过小多次显示，不是一张图片。

背景图全屏（background-size:100%;）
table{
	background-image: url(../../img/HBuilder.png);
	background-size: 100% 100%;
}

扩展：隐藏某个元素

  • visibility（隐藏区域，不显示，但占据的位置还在）
visibility: hidden;
  • display（位置也不显示，页面会变）
display:none;

在这里插入图片描述

背景重复（background-repeat）

默认值：在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。
repeat-x ：水平方向上重复
repeat-y ：垂直方向上重复
no-repeat ：不允许图像在任何方向上平铺。

  • 默认
table{
	background-color: gray;
	background-image: url(../../img/HBuilder.png);
	background-size: 20%; 
}

在这里插入图片描述

  • 横向平铺
background-size: 20%; 
background-repeat: repeat-x;

在这里插入图片描述

  • 纵向平铺
    background-repeat: repeat-y;
  • 禁止平铺
    background-repeat: no-repeat
背景定位（background-position）
background-image:url('../../img/HBuilder.png');
background-repeat:no-repeat;
background-position:center;

在这里插入图片描述
首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

  • 关键字
    在这里插入图片描述
  • 长度值
    长度值：元素内边距区左上角的偏移。偏移点是图像的左上角。
    例如：如果设置值为 30px 100px，图像的左上角将在元素内边距区左上角向右 30 像素、向下 100 像素的位置上：
background-position:30px 100px;
固定背景（background-attachment）

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
通过 background-attachment 属性防止这种滚动。

background-attachment: fixed;

2. 文本

2.1. 缩进（text-indent）

首行缩进（text-indent: 2em）
p {text-indent: 2em;}

悬挂缩进

第一行顶头，下面缩进
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p{
	text-indent: -2em;
	padding-left: 2em;
}

在这里插入图片描述

2.2. 水平对齐（text-align）

文本行之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
除了最后一行的内容进行两端对齐：text-align: justify;
两端对齐：text-align-last: justify;

2.3. 字间隔（word-spcing：单词之前）

1em：一个字的大小。

p{word-spcing: 2em;}

在这里插入图片描述

2.4. 字母间隔（或汉字间隔：letter-spacing）

p{letter-spacing: 2em;}

在这里插入图片描述

2.5. 字符转换（大小写 text-transform）

none：对文本不做任何改动
uppercase：大写
lowercase：小写
capitalize：首字母大写

2.6. 文本装饰（text-decoration）

none
underline：下划线
overline ：上划线
line-through：文本中间画一个贯穿线
blink：让文本闪烁（浏览器可能不支持）

2.7. 处理空白符（white-space）

可以用来显示代码块。
默认：空格 回车等会被压缩。

<p>This     paragraph has    many
    spaces           in it.</p>
  • normal：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
white-space: normal;

在这里插入图片描述

  • pre：会注意额外的空格，甚至回车。
white-space: pre;

在这里插入图片描述
在这里插入图片描述

2.8. 文本方向（direction）

direction 属性有两个值：ltr 和 rtl。（和text-align功能差不多）
默认值是 ltr，显示从左到右的文本。
如果显示从右到左的文本，应使用值 rtl。

3. 字体

3.1. 字体系列（font-family）

font-family:“Microsoft YaHei”,“微软雅黑”,“SimHei”,“黑体”

3.2. 字体风格（font-style）

normal - 文本正常显示
italic - 文本斜体显示

3.3. 字体加粗（font-weight）

  • 关键字
    bold、normal
  • 数值
    100 对应最细的字体变形，900 对应最粗的字体变形。
    数字 400 等价于 normal，而 700 等价于 bold。

3.4. 字体大小（font-size）

p {font-size:14px;}

请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。

4.链接

4.1 伪类（一种选择器 link hover visited active）

类似一种动态效果，点击不点击时的状态变化。

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接（点击之后）
  • a:hover - 鼠标指针位于链接的上方（鼠标悬浮时）
  • a:active - 链接被点击的时刻（点击时一瞬间）

不仅仅可以用于超链接，任何元素（div、button等等）都可以

4.2 文本修饰（text-decoration多用于去掉、显示下划线）

text-decoration 属性大多用于去掉链接中的下划线。

a:link {
	color: black;
	/*没被访问时不显示下划线*/
	text-decoration: none;
}			
a:hover {
	/*鼠标悬浮时字体变黄色,出现下划线*/
	color: #C69500;
	text-decoration: underline;
}

4.3. 背景色(background-color)

a:link {background-color:#B2FF99;}
a:hover {background-color:#FF704D;}

5. 列表（常用来做导航栏 ul li）

html中讲过列表包括：有序列表（ol li），无序列表（ul li），自定义列表（dl dt dd）
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

5.1 列表类型（list-style-type 改变图标或者为none）

默认圆点，可以改成方块（square）

ul{list-style-type: square;}

5.2 列表项图像（list-style-image 用图形代替图标）

ul{
	margin-left: 100px;
	list-style-image: url(../../HelloHBuilder/img/HBuilder.png);
}

5.3 列表标志位置（list-style-position）

  • outside：默认值。
    保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。默认：图标和文本不是在一块的
    在这里插入图片描述
  • inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
ul{
	list-style-type: square;
	list-style-position: inside;
}

在这里插入图片描述

  • inherit：规定应该从父元素继承 list-style-position 属性的值。

5.4 简写形式

li {list-style : url(example.gif) square inside}

6. 表格

6.1 合并表格边框(border-spacing、border-collapse)

给table和td加边框之后是双线，合并：
* border-spacing=0; 线重叠在一起
* 或者border-collapse: collapse; 单纯的一条线
通过CSS改变table元素的样式：
boder-spacing和内联样式的cellspacing作用一样。
在这里插入图片描述

6.2 表格文本对齐（text-align、vertical-align）

  • text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td{text-align:right;}
  • vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
td {
    height:50px;
    vertical-align:bottom;
  }

6.3 表格内边距（padding）

内容与边框的距离：

table td{
	border: solid 1px black;
	padding: 50px;
}

在这里插入图片描述

B&&C
关注
专栏目录
CSS笔记一
03-15
**CSS笔记一** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本笔记将深入探讨CSS的基础知识，包括选择器、盒模型、...
狂神说视频-CSS笔记.pdf
11-12
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
CSS笔记
2201_76100326的博客
08-12 2693
before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置高宽度等属性需要首先设置为块元素。content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content: ' ';before与after的主要用途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以方便对伪元素定位。
CSS学习笔记
m0_58761900的博客
09-18 3117
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
CSS入门学习笔记+案例
热门推荐
itboy
06-16 31万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
css 笔记2
m0_68844946的博客
06-13 1806
这是div标签</div>复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。} </style> <div id="red">这是div标签
CSS入门笔记
m0_74293254的博客
09-19 1088
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页外观和布局的样式表语言。它为 HTML 提供了视觉上的美化工具，能够控制网页中元素的展示方式，包括字体、颜色、布局、间距、边框等。层叠：CSS 的“层叠”概念意味着样式规则可以以多种方式应用，它们的优先级会按一定的规则叠加生效。样式可以直接在 HTML 元素中定义，可以在页面的<style>标签中编写，也可以存储在外部的 CSS 文件中。样式。
CSS 学习笔记
weixin_42098295的博客
05-06 1279
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
前端css基础学习笔记
a_big_panda的博客
01-22 1023
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
第一周学习html css笔记
DarrenTitor的博客
10-05 400
0 1 solid不能遗漏 2 缺口方框，用“&amp;lt;fieldset”和“&amp;lt;legend”组合 3 图片固定在某位置，不随滚轮滚动，position：fixed 4 标题在表格的上方中央，caption-side: top ...
CSS学习笔记目录
wz_1992的博客
05-30 513
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
CSS笔记(1).pdf
01-26
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
CSS笔记总结（Xmind格式）：第一天
07-28
css知识总结： 1.css使用方式： 行内样式：直接在html标签中添加style属性 内部样式表：在文件内部添加的样式 外部样式：单独的css样式文件，通过link标签引入 使用@import导入的外部样式：会在html加载完成之后才...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
基于html的大模型调试页面
abments的博客
10-11 676
基于html的大模型调试页面
CSS简单入门
YY0503_的博客
10-14 945
新闻说：的那家店你</p><div>时间2024年10月14日</div>/* 属性名和属性值成对出现--键值对 */<title>新闻详细</title>使用-------> class=“类名”<title>CSS使用</title><title>CSS使用</title><title>CSS使用</title><p>你几点才能发多少</p><p>你几点才能发多少
前端学习---(2)CSS基础
最新发布
Fuly的博客
10-18 186
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。css语法: 选择器{ 属性名: 属性值;选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器。font-size: 属性 冒号之前是属性，冒号之后是值。知道什么是什么,知道知识点属于那一块,用的时候再查,color: 属性 冒号之前是属性，冒号之后是值。关于盒子、定位、布局的属性，都不能继承。
使用CSS Flexbox创建简洁时间轴
weixin_40539956的博客
10-13 718
在网页设计中,时间轴是一种常见且有效的方式来展示事件的顺序和进程。本文将介绍如何使用CSS Flexbox创建一个简洁优雅的时间轴,无需复杂的JavaScript代码。 首先,我们需要创建基本的HTML结构: CSS样式 1. 创建时间线 使用伪元素创建时间线: 2. 事件对齐 使用Flexbox对齐事件: 3. 垂直间距 使用Flexbox控制事件间的垂直间距: 4. 响应式设计 使用媒体查询实现响应式设计: 完整CSS代码 以下是完整的CSS代码: 通过这些CSS样式,我们创建了一个简洁、响应式的时间轴
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值