当前位置：首页 > news >正文

HTML中css的基础

news 2025/9/14 6:33:57

css能够对网页中元素的位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结果分离

1.css设置字体颜色

<style>
p {
/*设置字体*/
color:aqua
/*设置字体大小*/

}
</style>
<p>猜数字游戏</p>

注意:

•css要写到style标签中(后面跟还会介绍其他写法)

•style标签可以放到页面任意位置,一般放到head标签内

•css使用/**/作为注释(使用ctrl快速切换)

2.行内样式表

通过style属性,来指定某个标签的样式,只适合写简单样式,只针对某个标签生效

缺点:不能写太复杂的样式

这种写法优先级较高,会覆盖其他的样式

<style>
div{
color: red;
}
</style>
<div style="color:green">想要生活过的去,头上总得带点绿</div>

可以看到red样式被覆盖

3.外部样式

实际开发中最常用的方式

1.创建一个css文件

2.使用link标签引入css

<link rel="stylesheet" href="[css文件路径]"

创建demo.html

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外部样式</title><link rel="stylesheet" href="style.css">
</head>
<body><div>上帝为你关了一扇门,然后就去睡觉了</div>
</body>

创建style.css

div{color:red;
}

注意:不要忘记link标签调用css,否则生效

代码风格:样式格式

1.紧凑风格

p { color:red;font-size: 30px;}

4.基础选择器

<style>
p {
color: red;
}
div {
color:green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>狗尾巴</div>
<div>狗尾巴</div>
<div>狗尾巴</div>

5.类选择器

<style>
.blue{
color:blue;
}
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div>

代码示例:使用多个类名

注意:一个标签可以同时使用多个类名

<style>.box {width: 200px;height: 150px;}.red {background-color: bisque;}.green{background-color: aqua;}
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

6.id 选择器

和类选择器类似

•CSS中使用#开头表示id选择器

•id选择器的值和html中某个元素的id值相同

•html的元素id不必带#

•id是唯一的,不能被多个标签使用(是和类选择器最大的区别)

<style>
#ha {
color:red;
}
</style>
<div id="ha">蛤蛤蛤</div>

类比:

姓名是类选择器,可以重复

省份证号码是id选择器,是唯一的

7.复合选择器

代码示例:把ol中的li修改颜色,不影响ul

<ul><li>aaa</li><li>bbb</li><li>ccc</li>
</ul>
<ol><li>ddd</li><li>eee</li><li>fff</li>
</ol>

ol li {
color: red;
}

代码案例:元素2不一定非是儿子,也可以是孙子

<ul>
<li>aaa</li>
<li>bbb</li>
<li><a href="#">ccc</a></li>
</ul>
<style>
ul li a {
color:green;
}
</style>

代码示例:可以是任意基础选择器的组合(包括类选择器,id选择器)

<ol class="one">
<li>ddd</li>
<li>eee</li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
<li><a href="#">fff</a></li>
</ol>

<style>
.one li a{
color:green;
}
</style>

8.子选择器

•使用大于号分割

•只选亲儿子,不选孙子元素

<div class="two">
<a href="#">链接1</a>
<p><a href="#">链接2</a></p>
</div>

后代选择器的写法,会把链接1 和链接2 都选中

<style>
.two a{
color:red;
}
</style>

子选择器的写法,只选链接1

<style>
.two > a{
color:red;
}
</style>

1.把以下代码中的"小猫"改成红色

<style>
.cat ul li a{
color:red;
}
</style>

2.把以下代码中的"小猫"改成红色

css结果:

<style>
.cat>a{
color:red;
}
</style>

9.并集选择器

用于选择多组标签(集体声明)

•通过逗号分割等多个元素

•表示同时选中元素 1 和元素 2

•任何基础选择器都可以使用并集选择器

•并集选择器建议竖着写,每个选择器占一行(最后一个选择器不能加逗号)

代码示例:

1.把苹果和香蕉颜色改成红色

<style>
div,h3{
color:red;
}
</style>

2.把鸭梨和橙子也都放在一起改成红色

div,
h3,
ul>li {
color:red;
}

10.伪类选择器

1.链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:cative 选择活动链接

示例:

< a href="#">小猫</a>

11.字体属性

11.1设置字体

<style>
.font-family.one{
font-family: Microsoft Yahei;
}
.font-family.two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>

•字体名称可以用中文,但是不建议

•多个字体之间使用逗号分隔(从左到右查找字体,如果找不到,会使用默认字体)

•如果字体名有空格,使用引号包裹

•建议使用常见字体,否则兼容性不好

11.2 设置字体大小

p {
font-size: 20px;
}

注意:实际上它设置的字体是字体中字符框的高度;实际的字符字形可能比这些框高或矮

<style>.font-size.one {font-size: 40px;}.font-size.two {font-size: 20px;}
</style>
<div class="font-size"><div class="one">大大大</div><div class="two">小小小</div>
</div>

11.3字体粗细

p {
font-weight: bold;
font-weight: 700;
}

<style>.font-weight.one {font-size:900;}.font-weight.two {font-size:100;}
</style>
<div class="font-weight"><div class="one">粗粗粗</div><div class="two">细细细</div>
</div>

11.4 文字样式

<style>
.font-style em{
font-style: normal;
}
.font-style div{
font-style: italic;
}
</style>
<div class="font-style">
<em>
放假啦
</em>
<div class="one">
听说要上班
</div>
</div>

12 文本属性

<style>
.color {
color:red;
}
</style>
<div class="color">这是一段话</div>

12.1 文本对齐

• center:居中对齐

•left:左对齐

•right:右对齐

<style>
.text-align.one{
text-align: left;
}
.text-align.two{
text-align:right;
}
.text-align.three {
text-align: center;
}
</style>
<div class="text-align">
<div class="one">左对齐</div>
<div class="two">右对齐</div>
<div class="three">居中对齐</div>
</div>