CSS三种引入方式和五种选择器
程序员文章站
2022-04-27 22:30:22
...
CSS 如何使用？
语法和规范
选择器{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
一、CSS 的三种引入方式
第一种：行内引入
<div style="color:red;font-size: 100px;">
兔兔吃萝卜
</div>
第二种：内部引入方式
<style type="text/css">
div{
color:red;
font-size: 100px;
}
</style>
第三种方式：外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" />此处引用外部文件
</head>
<body>
<div>兔兔最可爱1</div>
<div>兔兔最可爱2</div>
<div>兔兔最可爱3</div>
<div>
<p>兔兔最可爱4</p>
</div>
<div>兔兔最可爱5</div>
</body>
</html>
二、元素选择器
CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)
1.元素选择器
元素名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
如果多个相同的元素设置相同的样式，使用此种方式最为合适。
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
span{
font-size: 30px;
}
</style>
</head>
<body>
<span>
兔兔那么可爱/
</span>
</body>
</html>
2.类选择器
.类名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
对多个元素设置相同的样式，此时使用类选择器比较合适。
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.div2{
font-size: 30px;
color: blueviolet ;
}
</style>
</head>
<body>
<div >兔兔最可爱1</div>
<div class="div2">兔兔最可爱2</div>
<div >兔兔最可爱3</div>
<div class="div2">兔兔最可爱4</div>
<div >兔兔最可爱5</div>
</body>
</html>
3.ID 选择器
#id 属性名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
Id 保证唯一。
<html>
<head>
<meta charset="UTF-8">
<title>ID 选择器</title>
<style>
#div5{
font-size: 20px;
color: chartreuse;
}
</style>
</head>
<body>
<div >兔兔最可爱1</div>
<div class="div2">兔兔最可爱2</div>
<div >兔兔最可爱3</div>
<div class="div2">兔兔最可爱4</div>
<div id="div5">兔兔最可爱5</div>
</body>
</html>
css其他选择器
4.层级选择器
父标签 后代标签{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
color: blueviolet;
}
</style>
</head>
<body>
<div ><p>兔兔最可爱</p></div>
</body>
</html>
5.属性选择器
标签名[标签属性='标签属性值']{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type="password"] {
background-color: crimson;
}
</style>
</head>
<body>
用户名：<input type="text" name="username" /><br /> 密码：
<input type="password" name="password" />
</body>
</html>
欢迎正在学习前端的同学和我交流，共同学习鸭！！
微信公众号：可爱多小姐
转载于:https://www.jianshu.com/p/122ea6165825