CSS样式表

最新推荐文章于 2025-09-05 14:24:44 发布

转载最新推荐文章于 2025-09-05 14:24:44 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cgj1994/p/9456160.html

文章标签：

#人工智能

本文详细介绍了CSS的三种引入方式：内联、内嵌和外部样式表，以及各种选择器的使用方法，包括ID选择器、类选择器、复合选择器等。此外还讲解了属性选择器和表单元素的选择，以及链接的四种伪类。最后深入探讨了CSS样式设置，如大小、背景、文字样式及对齐方式等。

CSS分类

内联：写在标签里面。控制精确，代码重用性差

<div style="background-color: red; width: 100px;height: 100px;">
</div>

内嵌：写在<head>标签内<style type="text/css"></style>。控制没有内联的精确，代码重用性好

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#first-div{
				background-color: blue;
				width: 100px;
				height: 100px;
			}
		</style>
<head>
<body>
                <div id="first-div">
		</div>
</body>

外部：单独的样式文件在<head>用link rel="stylesheet" type="text/css" href=""/>引用，控制没有内联的精确，代码重用性最好

创建一个.css文件，并与。html文件关联

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

CSS选择器

id：用#并根据id名来筛选唯一的元素

#first-div{
	background-color: blue;
	width: 100px;
	height: 100px;
}
</div>
	<div id="first-div">		
</div>

class：用.(点)并根据class名来筛选元素，可以有重复的名字

.common{
    background-color: pink;width: 100px;height: 100px;color: pink;
}

<div class="common">
	啊哈哈1
</div>
<div class="common">
	啊哈哈2
</div>
<div class="common">
	啊哈哈3
</div>

复合选择器：有并列选择，后代选择，子元素选择

并列选择用，隔开

#div,#div1{
	border: 1px solid black
}

后代选择用空格隔开

#first-ul li{
    color: red;
}
#scond-ul li{
    color: blue;
}
</div>
<ul id="first-ul">
	<li>无1</li>
	<li>无1</li>
	<li>无1</li>
</ul>
<ul id="scond-ul">
	<li>无2</li>
	<li>无2</li>
	<li>无2</li>
</ul>

子元素选择用>隔开

#div-p>p{
	color:red;background-color: green;
}
<div id="div-p">
	<p>11111</p>
	222222
	<p>3333333</p>
	<p>4444444</p>
</div>

属性选择器

[属性名 = 属性值]{}

[href="aa.html"]{
	color: #000000;
}
<a href="aa.html">跳转</a>

表单元素的属性选取

input[type="text"]{
	background-color: blue;
}
用户<input type="text" id="" value="" /><br />
密码<input type="password" name="" />

<a></a>的四个伪类

a：link 未访问的链接；a：visited访问过的链接；a：hover鼠标划过链接；a：active已选中的链接

a:link{
    color: black;
}
a:visited{
    color: brown;
}
			a:hover{
    color: green;
}
			a:active{
    color: pink;
}
<a href="https://www.baidu.com">跳转至百度</a>

CSS样式

大小和背景

width：宽度；height：高度；

背景颜色background-color

background-color: red;
width: 300px;
height: 300px;

背景图片background-image；背景尺寸background-size；背景平铺方式background-repeat；背景位置background-position

background-image: url(img/u=1051650636,1856256298&fm=27&gp=0.jpg);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: 20px 0;

文字

font-family 字体样式；font-size 字体大小font-style:italic倾斜；font-weight：粗细；

*{
	font-family: "微软雅黑";
}
#second-div{
	border: 1px solid blue;
	width: 200px;
	height: 200px;
	/*字体大小*/
	font-size: 10px;
	/*字体的倾斜*/
	font-style: italic;
	/*字体的粗细*/
	font-weight: bolder;
}
<div id="second-div">
	中共十八大以来，以同志为核心的党中央高举改革开放大旗，
	果断作出全面深化改革的重大战略决策，各领域改革向纵深推进。
	今天的《时间》，让我们一起重温关于全面深化改革的重要论述
</div>

text-decoration:文本修饰有：下划线underline；上划线 overline；删除线line-through；none 去掉线（可以用来去掉<a></a>超链接的下划线）；color：字体颜色

#third-div{
	border: 1px solid blue;
	width: 300px;
	height: 200px;
	font-size: 20px;
	/*下划线*/
	/*text-decoration: underline;*/
	/*上划线*/
	/*text-decoration: overline;*/
	/*删除线*/
	text-decoration: line-through;
	/*字体颜色*/
	color: orange;
}
a{
	/*去除掉<a>链接的下划线*/
	text-decoration: none;
}

对齐方式

水平对齐text-align；line-height行高

#third-div{
        /*水平对齐*/
	text-align: center;
	/*行高*/
	line-height: 200px;
}

转载于:https://www.cnblogs.com/cgj1994/p/9456160.html