CSS样式表

一、概述

1、CSS是什么？

层叠样式表，定制html元素的显示样式，美化页面，对于前端页面的搭建十分重要

2、为什么要使用CSS

（1）CSS 指层叠样式表 (Cascading Style Sheets)
（2）样式定义如何显示 HTML 元素
（3）样式通常存储在样式表中
（4）把样式添加到 HTML 中，是为了解决内容与表现分离的问题

111

（5）外部样式表可以极大提高工作效率
（6）外部样式表通常存储在 CSS 文件中
（7）多个样式定义可层叠为一个

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

# p table h1 只是为了告诉浏览器，这是什么标签，并不是用来表达它长什么样子
# 如果要设置标签内容样式的时候，应该使用css来定制# 为什么使用CSS？
1. 为了美化界面，给标签添加样式
2. 使用css可以将内容和表现形式分离

3、学习目标

熟悉，熟练使用常用的css样式属性，具备基本的页面美化能力。

二、初识CSS

1、第一个CSS样式

<head><title>CSS样式表</title><style type="text/css">p{color: white;         /* 字体颜色 */font-size: 25px;      /* 字体大小 */background-color: gray; /* 背景颜色 */width: 650px;           /* 宽度 */ }</style>
</head>
<body><p>才能的火花，常常在勤奋的磨石上迸发。</p>
</body>

2、如何插入样式表

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。在HTML文档中插入样式表的方法有三种：

外部样式表

<link href="css/index.css" rel="stylesheet" type="text/css" />

内部样式表（位于 <head> 标签内部）
```
<style type="text/css"></style>
```

内联样式（在 HTML 元素内部）

<p style="color: white;">学习HTML好简单
</p>

样式表的优先级：内联 > 内部 > 外部 > 缺省

# 引入CSS样式的三种方式：
1. 外部样式  新建一个.css文件 在head标签使用link来引入
2. 内部样式  在head标签中，加入一个style标签
3. 内联样式-行内样式 在开始标签中，加入style属性# 优先级： 内联样式 > 内部样式 > 外部样式 > 缺省样式（默认样式）
# 耦合性： 内联样式 > 内部样式 > 外部样式
# 弱耦合还是强耦合好？  弱耦合

3、基本语法

CSS 语法由三部分构成：选择器、属性和值：

body{  background-color:red; }

注意：多个样式之间用分号；隔开。

三、选择器种类

1、元素选择器

p{ color:white; background-color:gray;}

# 使用元素选择器时，页面中所有的元素将会被统一设置成某个样式

补充： div和span元素

div 是一个块级元素 : <div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

<div>	 才能的火花，常常在勤奋的磨石上迸发。  </div><div>	 只要愿意学习，就一定能够学会。</div>

span 标签被用来组合文档中的行内元素。

<div>	 只要愿意<span style="color: red;font-weight: bold;">学习</span>，就一定能够学会。</div>

# 1. div标签： div标签除了表示它是一个块级元素外，不具有任何的含义    块级元素 独自占用一行    eg:  p、hr、br、table、ul、ol、dl、li ...    作用：经常使用div来做页面的布局，可以把一个网站分为很多个div，每一个div内，可以加入很多个子标签    # 2. span标签：span标签除了表示它是一个行内元素外，它也不具有其它的含义    行内元素  不独占一行，不会自动换行    eg: a、img、font、input、button、b、i、u、del、sub、sup ...    作用：经常用于修改某一行文字中的部分文字的样式，而不是一整行文字的样式

2、类选择器

类选择器可以为标有特定 class 属性的 HTML 元素指定特定的样式。可以用于区分不同的HTML元素。

类选择器以 “.” 来定义

HTML：

<div class="div_1">	 才能的火花，常常在勤奋的磨石上迸发。 </div><div class="div_2">	 只要愿意学习，就一定能够学会。</div><div class="div_3 div_4">         <!-- 两个值 -->	 学的越多，自身的价值就越高。</div>

CSS:

<style type="text/css">	.div_1 {color: red;}	.div_2 {color: blue;}	.div_3 {color: green;}</style>

# 类选择器：给某一类（具有相同class属性）的标签设置统一的样式

3、id选择器

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

id 选择器以 “#” 来定义。

HTML：

<div id="div_1">	 才能的火花，常常在勤奋的磨石上迸发。 </div><div id="div_2">	 只要愿意学习，就一定能够学会。</div>

CSS：

<style type="text/css">	#div_1 { color: red; }	#div_2 { color: blue; }</style>

# id选择器与类选择器的区别1. 类选择器给某一类元素设置样式 作用的元素更多一些2. id选择器给某一个元素设置样式 作用一个元素3. 类选择器的class属性值可以重复，而id值不能重复注意：id属性的值不能以数字开头

4、派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。比如你希望div下的p标签的字体为蓝色：

HTML：

<div>	<p>才能的火花，常常在勤奋的磨石上迸发。</p> </div><p>	只要愿意学习，就一定能够学会。</p>

CSS：

div p{ color: blue; }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I6gI3nFT-1644507712066)(C:\Users\ADMINI~1\AppData\Local\Temp\1530771277016.png)]

后代选择器-子代选择器

5、选择器继承

根据 CSS，子元素从父元素继承属性：

HTML：

<div>	<p>才能的火花，常常在勤奋的磨石上迸发。</p> 	<b>只要愿意学习，就一定能够学会。</b></div>

CSS：

div { color: blue;}

# 设置了父标签的样式后，子标签会继承父标签的样式

6、选择器联合使用

同时对多个元素设置同一个样式：

h1,h2,h3,h4,h5,h6 {  	color: green;  }

div.div_1 div标签且类属性为div_1

7、伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5al18ZrN-1644507712068)(CSS.assets/1565663805600.png)]

四、背景样式

1、背景颜色

可以使用 background-color 属性为元素设置背景色。

HTML：

<div>	 才能的火花，常常在勤奋的磨石上迸发</div>

CSS：

div{background-color: gray; color: white;}

2、背景图像

2.1 设置背景图像

要把图像放入背景，需要使用 background-image 属性。

body{ background-image: url('lyf.jpg') }

2.2 背景重复

background-repeat 属性设置是否及如何重复背景图像。

repeat：重复
no-repeat：不重复
repeat-x：水平方向重复
repeat-y：垂直方向重复

div{ background-image: url('lyf.jpg'); background-repeat: no-repeat; }

2.3 背景定位

以利用 background-position 属性改变图像在背景中的位置。

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

div{ 	background-image: url('ym.jpg'); 	background-repeat: no-repeat; 	background-position: center;	height: 600px;	width: 600px;	background-color: lightgray;}

也可以使用百分比来设置图像的位置：

background-position: 0% 10%;

或者使用像素值来设置：

background-position: 50px 50px;

2.4 防止背景图像随着页面滚动

background-attachment: fixed;

五、文本样式

CSS 文本属性可定义文本的外观。

通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

1、文字颜色

使用属性color来指定文字颜色，其属性取值是CSS颜色。

CSS颜色表（RBG分别代表红绿蓝）

表示形式表示形式	说明	举例
颜色名称	通过英文单词指定颜色	red、green、blue
HEX	通过#RRGGBB或者#RGB的形式用十六进制表示颜色	ff0000（同#f00）、#00ff00（同#0f0）、#0000ff（同#00f）
RGB	通过rgb(r,g,b)的形式用三个不大于255的数字表示颜色	rgb(255,0,0),rgb(0,255,0),rgb(0,0,255)
RGBA	RGB形式的扩展，第四个数字取值范围0~1表示透明度，0表示完全透明	rgba(0,0,0,0.6)表示半透明黑色

2、文本缩进

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

缩进可以使用下面三种值：

em 长度单位，一般而言 1em = 16px
px 像素
% 百分比

div{ text-indent: 5em;  background-color: lightgray;}

3、水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

left 左对齐
center 居中
right 右对齐

HTML：

<ol>     <li class="li_1">才能的火花，常常在勤奋的磨石上迸发</li>     <li class="li_2">才能的火花，常常在勤奋的磨石上迸发</li>     <li class="li_3">才能的火花，常常在勤奋的磨石上迸发</li></ol>

CSS：

li.li_1 { text-align: left; }li.li_2 { text-align: center; }li.li_3 { text-align: right ; }

4、文本装饰

text-decoration 属性规定添加到文本的修饰，如加下划线、上划线、删除线等。

none 无装饰
underline 下划线
overline 上划线
line-through 删除线

去除链接中的下划线和颜色：

HTML：

<a href="http://www.baidu.com">百度一下，你就知道</a>

CSS：

a { text-decoration: none; color: black;}

添加下划线、删除线、上划线：

HTML：

<p>	<span class="s1">才能的火花，常常在勤奋的磨石上迸发</span>	<span class="s2">才能的火花，常常在勤奋的磨石上迸发</span>	<span class="s3">才能的火花，常常在勤奋的磨石上迸发</span></p>

CSS：

p .s1{ text-decoration: underline; }p .s2{ text-decoration: line-through; }p .s3{ text-decoration: overline; }

5、行间距

<p> 	佛说， 前世五百年的回眸，才换得今生的擦肩而过，那么今生，我又要付出多少期盼，才能换得与你的再一次邂逅？<br> 	光阴辗转，兜兜转转，却走不出与你遇见的千回百转，将一笺心语，绽放于相思的轮回里，任花开花落，等你，在红尘深处。<br> 	心事如莲，有谁能懂？独处一隅，饮尽孤独，只为在最美的年华里，遇见懂得的那个人，即便，这一场等待，注定是一场关于缘分的修行。</p>

p{line-height: 130px;}

六、字体样式

1、指定字体

指定字体: font-family

p {font-family: sans-serif;}

2、字体尺寸

font-size设置字体的尺寸：

p{ font-size: 100px; }

3、字体粗细

font-weight设置字体的粗细。

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

p{ font-weight: 700; }

4、字体样式简写

p{ font: bolder 50px sans-serif; }

# 补充：1. 列表样式<ul>    <li>北京</li>    <li>上海</li>    <li>广州</li></ul><style>        li {            /*list-style-type: lower-roman;*/            list-style-type: none; /*去除样式-小圆点*/        }</style>

七、框模型（盒子模型）

1、概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VXOIcxUR-1644507712069)(CSS.assets/1566219791141.png)]

元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距的边缘是边框。
边框以外是外边距。

2、内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

2.1 padding属性

p{padding:30px;width: 200px;height: 200px;background-color: lightgray;}

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

p{padding:30px 0px 60px 0px;}

2.2 单边内边距

padding-top
padding-right
padding-bottom
padding-left

# 内边距： padding1. 作用： 设置内容和边框之间的距离2. 效果： 设置了内边距后，会撑大盒子

3、边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

3.1 边框样式

dotted 点状边框
dashed 虚线
double 双线
solid 实线

p{	width: 200px;	height: 200px;	border-style: dotted dashed double solid;}

也可以设置单边框样式：

border-top-style
border-right-style
border-bottom-style
border-left-style

3.2 边框宽度

可以通过 border-width 属性为边框指定宽度。

p{	width: 200px;	height: 200px;	border-style: dotted dashed double solid;	border-width: 5px;}

3.3 边框颜色

p{	width: 200px;	height: 200px;	border-style: dotted dashed double solid;	border-width: 5px;	border-color: red;  /* 设置边框颜色 */}

3.4 边框简写

p{	width: 200px;	height: 200px;	border: solid red 5px;}

4、外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

4.1 margin 属性

<div>	<p> 		佛说， 前世五百年的回眸，才换得今生的擦肩而过，那么今生，我又要付出多少期盼，才能换得与你的再一次邂逅？ 	</p></div>

<style type="text/css">	div{width: 800px;height: 300px;background-color: lightgray;margin:0 auto;}	p{ width: 500px; height: 200px; background-color: lightcoral; margin:30px 0 0 50px;}</style>

4.2 单边外边距属性

margin-top
margin-right
margin-bottom
margin-left

# 外边距： margin1. 作用：设置盒子与盒子之间的距离2. 效果：两个盒子的边框有一定距离

八、CSS定位

1、定位概述

# CSS的定位和浮动的理解：1. CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。2. 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊3. CSS 有三种基本的定位机制：普通流、浮动和绝对定位。	除非专门指定，否则所有框都在普通流中定位。	块级框从上到下一个接一个地排列

2、相对定位

# 1. 相对定位： postion:relative相对定位是相对于自身原来的位置进行偏移。需要去设置它的top left right bottom 来进行偏移

3、绝对定位

# 绝对定位： postion: absolute设置为绝对定位的元素框会从文档流中完全删除，并相对于浏览器窗口进行偏移或有相对定位的父元素

4、固定定位

5、浮动

1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。# 参考：https://www.w3school.com.cn/css/css_positioning_floating.asp

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

html简单内容
HTML # HTML是属于前端技术，主要使用进行前端网页的开发，使用HTML开发出来的网页是一个静态页面一、HTML简介 HTML 俗称网页，就是我们打开浏览器访问任何一个网站所看到的都是由 HTML 页面提供的（或者与 HTML 技术相关的内容提供…...
2024/4/13 7:50:36
【二分查找】278. 第一个错误的版本
题目你是产品经理，目前正在带领一个团队开发新的产品。不幸的是，你的产品的最新版本没有通过质量检测。由于每个版本都是基于之前的版本开发的，所以错误的版本之后的所有版本都是错的。假设你有 n 个版本 [1, 2, …, n]，你想找…...
2024/4/13 7:50:26
springboot的mockmvc（了解）
一 mockmvc mockmvc 相当于postman的作用，模拟调用controller的接口服务。请求 Controller 层是否正常。在面向对象的程序设计中，模拟对象（英语：mock object）是以可控的方式模拟真实对象行为的假对象。在编程过程中…...
2024/4/17 0:44:28
复杂美区块链溯源系统架构
从功能架构上，复杂美将区块链存证溯源系统按照功能划分为区块链核心层、接口层、运维管理层、溯源平台层和用户端层。添加描述 (1)区块链基础层：面向整个存证溯源平台提供基础信息服务，主要是为上层架构组件提供基础设施，保证上…...
2024/4/13 7:50:21
寒假集训总结 (1.23~1.28) [第一梯队]
Day 1. 分治算法入门一、分治法概述分治法的设计思想对于一个规模为nnn的问题：若该问题可以容易地解决（比如说规模nnn较小）则直接解决，否则将其分解为kkk个规模较小的子问题，这些子问题互相独立且与原问题形式相…...
2024/4/18 11:37:44
搭建sqlsugar代码生成器
下载代码： 换用exe执行： 配置数据库： 验证是否成功有效链接会显示成 true ，库已建会显示成true 那么就代表配置成功了，如果不成功请手动建库和检查字符串本演示中数据库已经存在： 如果数据库存在表&am…...
2024/4/13 7:50:46
2月10日练习
P2580 于是他错误的点名开始了题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人。他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次，然后正好被路过的校长发现了然后就是一顿欧拉欧拉欧拉（详情请见已结束比赛 CON900）。题…...
2024/4/13 7:51:41
数模学习——知识图谱
注：欢迎关注datawhale：https://datawhale.club/ 系列： 知识图谱入门一：知识图谱介绍知识图谱入门2-1：实践——基于医疗知识图谱的问答系统知识图谱入门2-2：用户输入-＞知识库的查询语句知识…...
2024/4/13 7:51:31
六石管理学：容易有哪几种
看容易，说容易，想容易说谁不会啊？对不。再简单的事情，一动手就会发现不容易。看别人容易看别人写字画画唱歌演奏，真的太容易了。可是吾就干瞪眼，羡慕不已。有时吾自己都想，很多事情吾做起来容…...
2024/4/20 3:51:47
通用接口开放平台设计与实现——（35）消息服务之安全增强
我们对于消息服务这块的整体设计是客户端连接服务端后，发起身份认证，携带应用编码和密钥，并对密钥进行了hash加密，服务端认证通过后，建立长连接。对于长连接，我们认为是安全，恶意用户无法直…...
2024/4/13 7:51:16
JAVA 实现《大富翁》游戏｜CSDN创作打卡
前言大富翁，又名地产大亨。是一种多人策略图版游戏。参与者分得游戏金钱，凭运气（掷骰子）及交易策略，买地、建楼以赚取租金。英文原名monopoly意为“垄断”，因为最后只得一个胜利者，其余均破产…...
2024/4/13 7:51:31
清新黄色背景薪酬绩效考核管理模版PPT模板
模板介绍本套清新黄色背景薪酬绩效考核管理模版PPT模板,模板编号：P66891，大小10MB,共27页,比例为16:9,由封面、目录、转场页、内容、结尾5个部分构成。内含灰色多种配色，精美风格设计，动态播放效果，精美实用。一…...
2024/4/20 0:24:40
14 metabase定制
修改标题名称和favicon.ico： 修改前： 文件默认存放途径： 将相关文件拷贝到此目录下即可： 修改标题： 修改本页的图片和文字描述： 修改前： 修改图片： 修改为如下： 实际测…...
2024/4/17 0:45:04
机器人极简史
智能型机器人是最杂乱的机器人，也是人类最希望可以提前制造出来的机器朋友。然而要制造出一台智能机器人并不简单，仅仅是让机器模仿人类的行走动作，科学家们就要付出了数十乃至上百年的努力。 20世纪20年代捷克斯洛伐克作家卡雷尔恰佩克在他…...
2024/4/13 7:51:26
北京第一年-OpenGL-2什么样的是好程序
半个月前在哈尔滨面试本地一家企业的时候，第三轮面试一个技术总监问我“你觉得什么样的程序是好程序？”，是啊，怎样算好。其实如果能知道什么样的程序不好，自然就知道什么样的程序好。我回答说，1容易测试的…...
2024/4/13 7:51:46
【待续】我相信每个人都有选择自己生活方式的权利 —— 写在美术专栏前面
一、选择自己的生活方式二、透视，构成，色彩 —— 美术的基础...
2024/4/8 18:31:35
Mysql 8.0.12 报错：ERROR 2013 (HY000): Lost connection to MySQL server during query
背景最近在用phpstudy安装discuz时默认数据库mysql8.0.12只在本地，在用phpstudy安装完discuz时数据库正常，但是在命令行执行新建其他数据库的时候报如下错误： 报错 ERROR 2013 (HY000): Lost connection to MySQL server during query完整…...
2024/4/17 0:44:52
基础练习特殊回文数 java 题解 9
问题描述 123321是一个非常特殊的数，它从左边读和从右边读是一样的。　　输入一个正整数n， 编程求所有这样的五位和六位十进制数，满足各位数字之和等于n 。输入格式输入一行，包含一个正整数n。输出格式按从小到大的顺序输出…...
2024/4/27 7:42:00
Html+Css+Js随机生成颜色 RGB
Html部分 <!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title></title> <link rel"stylesheet" type"text/css" href"css/index.css" /> …...
2024/4/19 19:45:56
Matlab中支持可变数量的输入
目录支持可变数量的输入支持可变数量的输入本示例介绍如何使用varargin定义接受可变数量的输入参数的函数。varargin参数是包含函数输入的元胞数组，其中每个输入都位于它自己的元胞中。在名为plotWithTitle.m的文件中创建一个函数，为plot函数接受可…...
2024/4/13 7:51:41

css 简单知识

CSS样式表

一、概述

1、CSS是什么 ？

2、为什么要使用CSS

3、学习目标

二、初识CSS

1、第一个CSS样式

2、如何插入样式表

3、基本语法

三、选择器种类

1、元素选择器

2、类选择器

3、id选择器

4、派生选择器

5、选择器继承

6、选择器联合使用

7、伪类选择器

四、背景样式

1、背景颜色

2、背景图像

2.1 设置背景图像

2.2 背景重复

2.3 背景定位

2.4 防止背景图像随着页面滚动

五、文本样式

1、文字颜色

2、文本缩进

3、水平对齐

4、文本装饰

5、行间距

六、字体样式

1、指定字体

2、字体尺寸

3、字体粗细

4、字体样式简写

七、框模型（盒子模型）

1、概述

2、内边距

2.1 padding属性

2.2 单边内边距

3、边框

3.1 边框样式

3.2 边框宽度

3.3 边框颜色

3.4 边框简写

4、外边距

4.1 margin 属性

4.2 单边外边距属性

八、CSS定位

1、定位概述

2、相对定位

3、绝对定位

4、固定定位

5、浮动

相关文章

最新文章

1、CSS是什么？