css 简单知识

最新推荐文章于 2024-10-13 17:00:37 发布

橘长

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量315

点赞数

分类专栏： django 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_43635902/article/details/122871537

版权

django 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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