本文介绍了CSS的基础知识，包括如何使用CSS修改HTML元素的样式，如字体大小、颜色和边框等。接着讲解了标签选择器、类选择器和ID选择器的使用方法，以及如何通过它们来定位和定制不同类型的HTML元素。此外，还提到了选择器的一些属性，如尺寸、字体和文本属性，并展示了如何应用这些属性来改变文本的样式。文章最后通过实例演示了如何使用CSS改变链接在不同状态下的样式。
一、css简介
- CSS：层叠样式表
- 通过使用CSS可以实现对html标签的属性进行控制
- CSS作用例如：修改字体大小、修改字体颜色、修改未知
css的作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style type="text/css">
目标标签{
属性:值;
属性:值;
...
}
目标标签{
属性:值;
属性:值;
...
}
</style>
</head>
<body>
<h1>
haha
</h1>
<p>
123456
</p>
</body>
</html>
案例：要求如下 1）将h1标签中的文字修改为红色 2）给p标签加上一个边框，字体编为蓝色，设置背景色为绿色
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
color: red;
}
p{
color:blue;
border: 1px red solid;
background-color: yellowgreen;
}
span{
color: white;
font-size: 65px;
}
</style>
</head>
<body>
<h1>这是测试css的页面</h1>
<h1>今天是第五次课</h1>
<p>本届奥运会上的第六枚金牌。挪威选手蒙斯·勒伊斯韦兰以171.75分获得<span>银牌</span>，加
拿大选手马克斯·帕罗特以170.25分获得铜牌。 最近两个赛季，苏翊鸣发挥出色，不断带来惊喜。 2天前，
他成为中国首位单板滑雪大跳台世界杯冠军；8天前，他在<span>单板滑雪</span>男子坡面障碍技巧赛中收
获一枚银牌。 </p>
</body>
</html>
二、标签选择器
- 通过使用标签选择器可以定位到目标标签
1 基本选择器
* 就是基本选择器符号
- 有的浏览器是不支持星号的，所以尽量少用
案例：页面中的所有的文字大小都是25px，颜色都是黑色，字体样式用微软雅
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
color: black;
font-size: 25px;
font-family: 微软雅黑;}
h1{
font-size: 35px;
}
</style>
</head>
<body>
<h1>这是测试页面</h1>
<p>哈撒旦发射点为如果岁的法国和微软压缩的父亲为发射点发发</p>
</body>
</html>
三 、类选择器
- 也称之为class选择器
- 这是我们用的最多的
- 可以为一类标签进行同意的修饰，设置类的名字的方法是：定义：class=xx 使用：.类名
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li{
font-size: 30px;
}
.t1{
color: red;
}
.t2{
color: blue;
}
</style>
</head>
<body>
<h1 class="t2">列表</h1>
<ul>
<li class=t1>篮球</li>
<li class=t1>足球</li>
<li class=t1>乒乓球</li>
<li class=t1>排球</li>
<li class=t2>西瓜</li>
<li class=t2>苹果</li>
<li class=t2>水蜜桃</li>
</ul>
</body>
</html>
四、id选择器
设置类的名字的方法是
定义：id=xxx 使用：#类名
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li{
font-size: 30px;
}
#t1{
color: red;
}
#t2{
color: blue;
}
</style>
</head>
<body>
<h1 id="t2">列表</h1>
<ul>
<li id=t1>篮球</li>
<li id=t1>足球</li>
<li id=t1>乒乓球</li>
<li id=t1>排球</li>
<li id=t2>西瓜</li>
<li id=t2>苹果</li>
<li id=t2>水蜜桃</li>
</ul>
</body>
</html>
五、选择器属性
1 尺寸属性
- width
- heigh
2 字体属性
- font-size：设置字体大小
- font-family：字体类型：宋体、微软雅黑
- font-style：设置字体倾斜
- font-weight：设置字体加粗，bold
3 文本属性
- color：字体颜色
- text-decoration：文本的修饰线，取值
- none：不显示线
- underline：下划线
- overline：上划线
- line-through：删除线 t
- ext-align：设置水平对齐方式：left、center、right
- text-indent：设置首行缩进几个字符
- line-height：设置行高
关于a标签的状态：
- link：表示a标签的默认状态【点击前】
- hover：将鼠标放到a标签上面时候的状态
- visited：点击过a标签以后，a 标签的状态
- active：点击a标签，但是鼠标没有松开时候的状态
扫一扫
6078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
