本文详细介绍了CSS的使用方式，包括行内样式、内部样式和外部样式表。接着阐述了CSS的选择器，如基础选择器、组合选择器和其他选择器的用法。还讲解了常见的CSS样式，如display属性、字体文本样式和定位方法。内容适合初学者了解和掌握CSS基础。
CSS
1.使用方式
1.使用方式:
行内样式表 : 在元素的开始标签上添加一个style属性,样式定义在style属性值中
内部样式表 : head中定义style标签对,标签对中定义css样式
外部样式表 : 在外部定义一个css文件,在要使用的html中通过link标签引入
2.CSS 层叠样式表
为html中的元素添加样式
相同的样式多个,会覆盖
不同的样式多个,会叠加
2.选择器
1.语法
语法:
选择器 {
样式;
样式;
样式;
...
}
样式 :
属性名 : 属性值 ;
注意 : 为元素设置样式建议使用css
2.就近原则
样式表的优先级: 优先显示谁
谁离元素近就优先显示谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用方式</title>
<!--内部样式表-->
<style>
div{
width: 100px;
height: 100px;
background: hotpink;
border-radius: 100%; /*圆*/
}
</style>
<!--link标签引入外部样式表-->
<link rel="stylesheet" href="css/first.css">
</head>
<body>
<div style="width: 200px;height: 200px;background: plum">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
3.css选择器
选中一个或者一组元素,方便为元素添加样式
基础选择器 ****
组合选择器 ****
群组选择器 ****
属性选择器 ***
伪列选择器 ****
微元素选择器
1.基础选择器 :
#id选择器 : 根据元素id属性值,选中一个元素
.class|类选择器 : 根据元素的class属性值,选中一个或者组员元素
标签|元素选择器 : 根据标签名选中一个或者一组元素
*通配符 : 选中所有元素
基础选择器的优先级:
id>class>元素>通配符
注意：
元素的class属性值可以相同，并且值列表可以存在多个值
群组选择器 : 通过多种选择器匹配到多个元素同时选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*id选择器*/
#box{
border: 1px solid fuchsia;
background: skyblue;
}
/*.class|类选择器*/
.green{
background: green;
}
.red{
color: red;
}
/*元素选择器*/
div{
font-size: 30px;
background: palevioletred;
}
/*通配符*/
/* 去除浏览器的默认样式 : 内外边距*/
*{
margin: 0;
padding: 0;
}
/*群组选择器*/
#box,.red,p{
font-style: italic; /*斜体*/
}
ul,ol{
background: red;
}
</style>
</head>
<body>
<div id="box">div1</div>
<div class="green red">div2</div>
<p class="green">p
最低0.47元/天 解锁文章
2123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
