CSS基础标签属性及案例

最新推荐文章于 2024-06-13 23:29:27 发布

Willing卡卡

最新推荐文章于 2024-06-13 23:29:27 发布

阅读量1.1k

点赞数

分类专栏：前端知识文章标签： css web

本文链接：https://blog.csdn.net/weixin_42601136/article/details/105436200

版权

前端知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS基础

CSS：cascading style sheets，层叠样式表格；CSS起到装饰作用，将不同功能的代码做分离，方便维护；可以大大提高工作效率，将HTML代码和样式代码分离；

1. 书写规范

格式：选择器 {属性:属性值;属性:属性值}
- 选择器：确定当前css修饰的是哪一个元素

2. CSS与HTML的结合

2.1 内联结合

使用font标签可以改变文本的字体大小和字体颜色，但是字体大小最大是7，不能满足部分需求；

格式：

style=“属性名1: 属性值1;属性名2: 属性值2”
颜色取值：颜色英文单词/颜色16进制

<html>
	<head>
		<meta charset="UTF-8">
		<title>内联结合</title>
	</head>
	<body>
		<div>
			<font style="font-size: 100px; color:red;">这是一个div</font>
		</div>	
	</body>
</html>

优点：简单方便，一般对少数的特定的元素进行单独设置；
缺点：复用性差

2.2 内部结合

需要在head标签中使用style标签
使用选择器选中元素
编写css代码

格式：

选择器{

属性名1：属性值1；

属性名2：属性值2；

}

<html>
	<head>
		<meta charset="UTF-8">
		<title>内部结合</title>
        <style>
        	font{
        		font-size: 50px;
        		color: red;
        	}
        </style>
	</head>
	<body>
		<div>
			<font >这是font1</font><br />
			<font >这是font2</font><br />
			<font style="color: blue;">这是font3</font><br />
		</div>
	</body>
</html>

优点：可以对多个标签进行统一样式设置
缺点：复用性不高，css代码和html代码分离不彻底，只能作用于当前页面；

2.3 外部结合

实现：

新建一个CSS样式文件，放入CSS文件夹下

编写CSS代码

使用link标签引入外部样式文件

font{
	font-size: 20px;
	color: red;
}

<html>
	<head>
		<meta charset="UTF-8">
		<title>外部结合</title>
		<link rel="stylesheet" href="css/CSS_01.css"/>
	</head>
	<body>
		<div>
			<font >这是font1</font><br />
			<font >这是font2</font><br />
			<font >这是font3</font><br />
		</div>
	</body>
</html>

优点：将HTML和CSS代码完全分离，复用性高；
./代表同一个目录
…/代表上一级目录

3. CSS选择器

让开发者能够选定元素；

3.1 Id选择器

使用 # 引入，引用的是元素的id属性；id唯一标识

语法：

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

<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			font{
				font-size: 20px;
			}
			#i{
				color: red;
			}
			#j{
				color: orangered;
			}
			#k{
				color: green;
			}
		</style>
	</head>
	<body>
		<font id="i">this is font one</font><br />
		<font id="j">this is font two</font><br />
		<font id="k">this is font three</font><br />
	</body>
</html>

3.2 类选择器

使用”.”来描述，引用的的是元素上的class属性值；

格式：

.class属性值{
属性名:属性值;
}

处理多个元素有相同样式效果的；

<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			font{
				font-size: 20px;
			}
			.red{
				color: red;
			}
			.green{
				color: green;
			}
			.blue{
				color: blue;
			}
		</style>
	</head>
	<body>
		<font class="red">this is font red</font><br />
		<font class="red">this is font red</font><br />
		
		<font class="green">this is font green</font><br />
		<font class="green">this is font green</font><br />
		
		<font class="blue">this is font blue</font><br />
		<font class="blue">this is font blue</font><br />
	</body>
</html>

3.3 标签选择器

对页面上的标签进行统一的设置，引用的就是标签的名称；

格式：
标签名{
属性名:属性值;
}

<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<!--
			将font标签中的文本颜色修改为红色
			将span标签中的文本颜色修改为蓝色
			将div标签中的文本颜色修改为绿色
			所有的文本大小都为20px
		-->
	<style>
			body{
				font-size: 20px;
			}
			font{
				color: red;
			}
			span{
				color: blue;
			}
			div{
				color: green;
			}
		</style>
	</head>
	<body>
		<font>this is a font1</font><br />
		<span>this is a span1</span><br />
		<font>this is a font2</font><br />
		<div>this is a div1</div><br />
		<span>this is a span2</span><br />
		<font>this is a font3</font><br />
		<div>this is a div2</div><br />
	</body>
</html>

3.4 选择器的分组

多个选择器使用同一段CSS,那么就可以将这多个选择器划为一组,使用分组。选择器之间使用逗号分开；

格式：
id选择器,class选择,元素选择器{
属性名:属性值;
}

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器的分组</title>
		<!--
			font/span/div中的文本内容字体大小为20px,字体颜色为红色
        -->
		<style>
			#f1,.s1,div{
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<font id="f1">this is a font</font><br />
		<span class="s1">this is a span</span><br />
		<div>this is a div</div><br />
	</body>	
</html>

3.5 派生选择器

通过依据元素在其位置的上下文关系来定义，可以使标记更加简洁。也称为上下文选择器；

父标签名(父id,父类名) 子标签名(子id,子类名){
属性名:属性值;
}

<html>
	<head>
		<meta charset="UTF-8">
		<title>派生选择器 </title>
		<!--
		设置span中的font中内容样式,先找到span,再找到font
       -->
       		<style>
			span font{
				font-size: 20px;
				color: blue;
			}
		</style>
	</head>
	<body>
		<span>
			<font>这是一个font</font>
		</span>
		<div>
			<font>这是一个font</font>
		</div>
	</body>
</html>

3.6 选择器的优先级

内联样式 > id选择器 > 类选择器 > 标签选择器

作用范围越小，优先级越大

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器优先级</title>
		<style>
			/*标签选择器*/
			font{
				font-size: 10px;
				color: yellow;
			}
			/*类选择器*/
			.class{
				font-size: 20px;
				color: red;
			}
			/*id选择器*/
			#id1{
				font-size: 30px;
				color: beige;
			}
		</style>
	</head>
	<body>
			<font id="id1" class="class" style="font-size: 40px; color: red;">
			这是一个font
		</font>
	</body>
</html>

4.CSS伪类

CSS伪类用于向某些选择器添加特殊的效果；

在支持CSS的浏览器中，链接的不同状态都可用不同方式显示，这些状态包括活动状态、已访问状态、未被访问状态、鼠标悬停状态；

a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接

注意事项
a:hover 必须被置于 a:link 和 a:visited 之后
a:active 必须被置于 a:hover 之后

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS伪类</title>
		<style>
			a:link {
				/* 未访问的链接 */
				color: cornflowerblue;
			}
			a:visited {
				/* 已访问的链接 */
				color: red;
			}
			a:hover {
				/* 鼠标移动到链接上 */
				color: orange;
			}
			a:active {
				/* 选定的链接 */
				color: green;
			}			
			font:hover{
				color: green;
				font-size: 100px;
			}			
			button{
				background-color: orange;
			}			
			button:hover{
				background-color: orangered;
			}
		</style>
	</head>
	<body>
		<a href="index.html">this is a super link</a><br />
		<font>this is a font element</font><br />
		<button>按钮</button><br />
	</body>
</html>

5.CSS的属性

5.1 字体属性

CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）；

font-family:

默认微软雅黑，如果浏览器不支持字体系列，就会使用默认的字体系列；

font-size:
字体大小
font-style:
字体倾斜度
font-weight:
字体的粗细

<html>
	<head>
		<meta charset="UTF-8">
		<title>字体属性</title>
		<style>
			
			span{
				font-family: "楷体";
				font-size: 10px;
				font-style: oblique;
				font-weight: bolder;
			}		
		</style>
	</head>
	<body>
		<span>这是一个span标签</span>
	</body>
</html>

5.2 文本属性

可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进；

css文本属性
direction:
ltr: left to right
rtl: right to left
line-height:文本行高
text-align:文本的对齐方式
text-decoration：文本装饰常用属性underline、none、line-through

text-indent:首行缩进以em为单位，如首行缩进2个字符2em；

letter-spacing:字符间距,字符与字符之间的间距
word-spacing:单词间距,单词与单词之间的间距

<html>
	<head>
		<meta charset="UTF-8">
		<title>文本属性</title>
		<style>
			div{
				font-size: 50px;
				color: gray;
				direction: ltr;
				text-align: left;
				text-decoration: none;
			}
			a{
				font-size: 50px;
				text-decoration: none;
			}
			#i1{
				font-size: 100px;
				letter-spacing: 20px;
			}
			#i2{
				font-size: 100px;
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<div>
			这是一个div
		</div>
		<a href="index.html">超链接</a>
		
		<div id="i1">
			this is a div1
		</div>
		<div id="i2">
			this is a div2
		</div>
	</body>
</html>

5.3 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；

background-color:将颜色作为背景
background-image:将图片作为背景

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS背景属性</title>
		<style>
			body{
				background-color: darkgoldenrod;
				color: red;
				font-size: 100px;
				background-image:url(img/123.png);
				background-size: cover;
			}
		</style>
	</head>
	<body>
		卡卡之家
	</body>
</html>

5.4 尺寸属性

CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；

CSS尺寸属性对行内元素无效，只对是块级元素

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS尺寸属性</title>
		<style>
			#d1{
				min-width: 100px;
				max-width: 300px;
				
				min-height: 100px;
				max-height: 300px;
				
				width: 500px;
				height: 500px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="d1">这是一个div</div>
	</body>
</html>

5.5 列表属性

CSS 列表属性允许放置、改变列表项标志，或者将图像作为列表项标志；

list-style-image 将图象设置为列表项标志；
list-style-position 设置列表中列表项标志的位置；
list-style-type 设置列表项标志的样式；

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS列表属性</title>
		<style>
			ul{
				/*文本内容的对齐方式*/
				text-align: center;
				list-style-image: url(img/a.gif);
				/*list-style-type: circle;*/
				list-style-position: inside;
			}
		</style>
	</head>
	<body>
		
		<ul>
			<li>卡卡</li>
			<li>之家</li>
			<li>卡卡</li>
		</ul>
	</body>
</html>

5.6 边框属性

CSS边框属性允许规定元素边框的样式、宽度和颜色；

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS边框属性</title>
		<style>
			body{
				text-align: center;
			}
			#d{
				width: 300px;
				height: 300px;
				/*样式都一样*/
				border: dotted greenyellow 10px;
				/*
				 * 左边框
				 * 样式：点状
				 * 颜色：淡绿
				 * 宽度：10px
				 */
				/*
					border-left-style: dotted;
					border-left-color: greenyellow;
					border-left-width: 10px;
				*/
				border-left: dotted greenyellow 10px;
				/*
				 * 上边框
				 * 样式：虚线
				 * 颜色：中绿
				 * 宽度：15px
				 */
				border-top: dashed mediumseagreen 15px;
				/*
				 * 右边框
				 * 样式：实线
				 * 颜色：绿
				 * 宽度：20px
				 */
				border-right:solid green 20px;
				
				/*
				 * 下边框
				 * 样式：实线
				 * 颜色：绿
				 * 宽度：20px
				 */
				border-bottom: double darkgreen 25px;
			}
		</style>
	</head>
	<body>
		<img id="d" src="img/123.png" />
	</body>
</html>

5.7 圆角边框

边角是个弧形；

<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS圆角边框</title>
	<style>
			img{
				width: 500px;
				height: 500px;
				border-radius: 50%;
			}
			
		</style>
	</head>
	<body>
		<img src="img/123.png" />
	</body>
</html>

Willing卡卡

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础标签属性及案例

CSS基础CSS：cascading style sheets，层叠样式表格；CSS起到装饰作用，将不同功能的代码做分离，方便维护；可以大大提高工作效率，将HTML代码和样式代码分离；1. 书写规范格式：选择器 {属性:属性值;属性:属性值}选择器：确定当前css修饰的是哪一个元素2. CSS与HTML的结合2.1 内联结合使用font标签可以改变文本的字体大小和字体颜...
复制链接

扫一扫