CSS（1）

最新推荐文章于 2023-08-23 16:56:26 发布
最新推荐文章于 2023-08-23 16:56:26 发布
阅读量200 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/imzxww/article/details/110797392
版权

1CSS简介

1.1CSS语法规范

css规则由两个主要的部分构成：选择器以及一条或多条声明

<style>
p {
   color: red;
}
</style>

<style></style>需写在<head></head>里面

1.2CSS 代码风格

1.2.1 样式格式风格

1紧凑风格

h3 { color:deeppink;font-size:20px;}

2展开格式 

h3 { 
    color:deeppink;
    font-size:20px;
}

1.2.2 空格规范

h3 { 
    color: deeppink;

}

1、属性值前面，冒号后面，保留一个空格

2、选择器（标签）和大括号中间保留空格

2 CSS基础选择器

2.1选择器分类

选择器分为基础选择器和复合选择器两个大类

基础选择器由单个选择器组成

基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

2.1.1类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示

.类名 { 
    属性1: 属性值1;

}

在标签里面添加类名，如<li class="red">55</li>

注意

类选择器使用"."进行标识，后面紧跟类名（自定义，我们自己命名的）

可以理解为给这个标签起了一个名字，来表示

长名称或词组可以使用中横线来为选择器命名

不用使用纯数字、中文等命名，尽量使用英文字母来表示

命名要有意义，尽量使别人一眼就知道这个类名的目的

2.1.2类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的目的，这些类名都可以选出和这个标签

<div class="red font20">亚瑟</div>

在标签class属性中写多个类名

多个类名中间不许空格分开

2.2 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义

#id名 { 
    属性1: 属性值1;

}

id选择器和类选择器的区别

  1. 类选择器可以被多次使用
  2. id选择器不得重复
  3. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

2.3通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）

* { 
    属性1: 属性值1;

}

3 CSS字体属性

3.1字体系列

CSS使用font-family属性定义文本的字体系列。

p { font-family:"微软雅黑";}
div { font-family: Arial,"Microsoft Yahei","微软雅黑";}

3.2 字体大小

CSS使用font-size属性定义字体大小

p { 
    font-size:20px;
}

标题标签比较特殊，需要单独指定文字大小

3.3字体粗细

CSS使用font-weight属性设置文本字体的粗细

p { 
    font-weight:bold;
}

3.4文字样式

CSS使用font-style属性设置文本的风格

p { 
    font-style: normal;
}

3.5 字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码：

body { 
    font: font-style font-weight font-size/line-height font-family;
}
  • 使用font属性时，必须按上面的语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则属性不起作用

4 CSS文本属性

CSS Text属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1文本颜色

color属性用于定义文本的颜色

div {
    color: red;
}

 

 

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

4.2对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div {
    text-align: center;
}
属性值解释
left左对齐（默认值）
right右对齐
center居中对齐

 

4.3装饰文本

text-decoration 属性规定添加到文本的装饰，可以给文本添加下划线、删除线、上划线等

div {
    text-decoration: underline;
}
属性值解释
none默认。没有装饰线
underline下划线。链接 a自带下划线
overline上划线
line-through删除线

4.4文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是段落的首行缩进

p {
    text-indent: 2em;
}

 4.5行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p {
    line-height: 26px;
}

5 CSS引入方式 

5.1 内部样式表

内部样式表写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中

5.2 行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式

<div style="color: red; font-size: 12px;"></div>

5.3 外部样式表

样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中

  1. 新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中
  2. 在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">

 

 

oopslb
关注
css入门之CSS1、CSS2、CSS3、CSS4发展历程
蛐蛐的博客
07-11 2152
CSS 最初于 1996 年发布，由用于添加字体属性的属性组成例如字体和文本的强调颜色、背景和其他元素。CSS2 于 1998 年发布，为其他媒体类型添加了样式，以便可以用于页面布局设计。CSS3 于 1999 年发布，其中添加了演示样式属性，允许从文档构建演示文稿。CSS3 将其规范划分为许多单独的模块，这使得 CSS3 更易于处理。借助 CSS3，设计人员现在可以使用自定义字体，例如 Google Fonts 和 Typecast 中可用的字体。在 CSS 和 CSS2，设计人员只能使用“网络安全字体”
CSS滚动动画
liuhao9999的博客
06-28 2298
CSS滚动动画
四天带你快速前端入门
Wiliam的博客
06-04 993
Day1 什么是前端，前端技术的应用 前端就是数据的呈现 了解代码的编写软件vs code。 vs code包含Emmet，所以可以快捷的完成很多操作 ！ 快速生成html基础结构 lorem+数字 快速生成指定值的随机单词 前端的三驾马车——HTML,CSS,JS HTML——超文本标记语言 ，负责网页的结构 CSS——层叠样式表，负责网页的格式 JS ——负责网页的效果，JavaScript CTRL+/——快速注释 指令*数量——快速执行多个重复命令 HTML包含哪些元素 开始标记、结束标记、元素
前端自学第4天
Byfsky的博客
09-03 201
自学前端（第四天） html先告一段落，接下来开始css的学习。 CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS的引入方式 综合案例 Chrome调试工具 1.CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 CSS是层叠样式表的简称。 有时我们也会称之为CSS样式表或级联样式表。 CSS也是一种标记语言。 CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式（CSS）相分离 CSS语法规范 使用html时，需要遵从一定的规范，CSS也是如
css(1)
weixin_45734493的博客
10-27 222
学习目标 了解CSS的作用（给页面添加样式） 能够使用font属性设置文字相关样式（swsf） 能够使用chrome调试HTML/CSS代码 能够使用ID/类/标签选择器的作用（选择页面的标签，给其添加样式） 能够使用交集、并集选择器 能够使用后代/子代选择器的作用（选择页面的标签，给其添加样式） 几种设置颜色的方式（英文单词、rgb(0,0,0)、rgba(0,0,0,0)、#FEFEFE） ...
css（1）
m0_46636679的博客
07-23 180
css（1）什么是csscss样式规则css的三种引入方式1. 内部引入2. 行内样式表3.外部样式表Css字体属性2.font-family：字体font-weight：字体粗细font-style：字体风格text-align 文本对齐方式text-decoration 文本修饰text-transform 文本转换text-indent 文本缩进text-shadow 文本阴影direction 文本方向 什么是css CSS(Cascading Style Sheets的缩写) CSS通常称为CSS
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
css1css1css样式css1css1css1css1css1css1css33333
08-08
css1css样式css1css1css1css1css1css1css33333
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
CSS 1 基本
Kylin__Zhang的博客
09-03 169
用CSS来修改元素的样式 WAY1 在标签内部通过style属性来设置元素的样式 缺陷：若用内联样式 样式只能对一个标签生效 若希望影响到多个元素 必须挨个修改 WAY2(内部样式表） 将样式编写到head中的style标签 然后通过CSS的选择器来选中元素并为其设置各种样式 可同时为多个标签设置样式 且修改时只需要一处 更方便复用 WAY3（外部样式表）（BEST!） 可将CSS样式编写到一个外部的CSS文件中 然后通过link标签来引入外部的CSS文件 需要通过link标签引入 使样式可以在不同页面之间
2、CSS id选择、类选择器
zhengqiqiqinqin的专栏
02-25 485
<!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>id.
CSS
m0_45097186的博客
06-25 424
CSS :页面美化和布局控制 一、概念: Cascading style Sheets 层叠样式表 【层叠】 多个样式可以作用在同一个html的元素上，同时生效。 【优点】 1.功能强大 2.将内容展示和样式控制分离 降低耦合度、解耦 让分工协作更容易 提高开发效率 二、CSS的使用: css与htm1结合方式 （1）、内联样式 在标签内使用style属性指定css代码 如: <div style="color:red;"> 你好 </div> “你好”字样变为红色 （2）、内
不同选择器的语法
一路生花
11-25 507
任何的标签都可以有id值，但是在同一个html文件当中，id的值是唯一的，所以说我们可以使用id值来定位到对应的元素。只要是在该分组当中，就会有该分组当中设定的效果。/* 当前页面中的所有的文字颜 色都相同 *//* 代表的是和p标签相邻的h1标签 */-- *代表的是通用选择器 -->* input、h2、span的文字。-- 先找到p再找到h1 -->只要是改标签，就会有对应的效果。-- 从上到下找 -->/* 父亲 > 孩子 */[属性] 也可以包含属性值。
CSS选择器
qq_64067728的博客
05-18 450
1.基础选择器 1.1标签选择器 如： div{ background-color: red; } 就是将所有div标签选中，将其背景颜色改为红色。 1.2 ID选择器 首先，要使用id选择器必须给标签添加一个id属性，然后才能通过在style标签中通过#表示对应的标签的id属性 如：body中写一个div标签： <div id="box">一个盒子</div> style中用id选择器选中它就用： #box{ ..
css hack
pingqizhendi的博客
03-17 193
史上最全的CSS hack方式一览（转） 做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。可是啊，现实太残酷，浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack...
CSS总结篇（一）
m0_72975897的博客
08-18 403
网页分成三个部分 结构 20个左右标签，先用一段时间 表现 外在显示的样子 行为 css -层叠样式表 -网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式 而最终我们能看到的只有最上边的一层 -设置网页中元素的样式。——将CSS样式编写到head中的style标签里,通过CSS选择器选中指定元素。4:将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，——声明块紧跟在选择器的后边，使用一对{}括起来，——声明块中实际上就是一组一组的名值对结构，一组一组的名值对我们称为声明，..
CSS-ID选择器
我就吃一口的BLOG
12-08 947
CSS-ID选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ID选择器</title> <style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color:
html+css+js实现简单的搜索关键词标记为红色
最新发布
xioxi
08-23 920
搜索。
仿华为太空人表盘的HTML+CSS1实现教程
资源摘要信息:"html+css1仿华为太空人表盘" 知识点一：HTML基础 HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标准标记语言。它由一系列的元素（Elements）组成，每个元素都由一对标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值