CSS学习（一）
2021-01-17 08:15
标签：选择 round mes 文件的 指定 oldboyedu curry 一个 分组 CSS（Cascading Style Sheets）称为层叠样式表，用于对页面进行美化。 css的样式有很多种，当如果想要把css样式应用到特定标签上有三种方式： 适用范围：指定一个标签。【不推荐，多标签无法复用样式】 适用范围：当前页面的所有标签。【推荐，多个标签可复用样式】 适用范围：所有引入css文件的页面。【推荐，多页面、多个标签均可复用样式】 以后在企业中写应用css样式时，写单页面时会把样式写在head头部；写多页面时，会把样式写入css文件，然后再在要应用的html页面引入css即可。 学习选择器的目的就是选中html页面中指定标签，便于以后给他应用样式。 在body中找到所有指定标签，例如：找到所有a标签，让他们颜色变绿。 在body中找一个id匹配的标签。（HTML中ID属性应唯一，相当于人的身份证号码），例如：找到id等于i1的标签，让他颜色变绿。 在body中找到所有class属性值匹配的标签。例如：找到所有class等于head的标签，让他绿了。 在body中找到所以class属性值匹配的标签。 在body标签中根据父子关系找到指定标签。 对选择器进行分组，无需重复编写。 CSS学习（一） 标签：选择 round mes 文件的 指定 oldboyedu curry 一个 分组 原文地址：https://www.cnblogs.com/sunny0824/p/13367432.html一、应用方式
1.1 标签中填写
div style="color:green;">KOBEdiv>
1.2 head标签中定义
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
style>
/*给所有的div设置样式*/
div {
color: green;
}
style>
head>
body>
div>Alexdiv>
div>mjjdiv>
body>
html>
1.3 在css文件中定义，适用范围：所有引入css文件的页面。
div {
color: green;
}
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
link rel="stylesheet" href="common.css">
head>
body>
div>Alexdiv>
div>老男孩div>
body>
html>
二、选择器
2.1 标签选择器
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
style>
a {
color: green;
}
style>
head>
body>
div>周杰伦div>
a href="https://www.oldboyedu.com">Alexa>
p>Alexp>
ul>
li>
a href="#">朗朗a>
li>
ul>
body>
html>
2.2 id选择器
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
style>
/*找到所有a标签，并应用内部数据*/
#i1 {
color: green;
}
style>
head>
body>
div>老男孩div>
div>
span id="i1">师范span>
div>
p>南京p>
body>
html>
2.3 class选择器
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
style>
.head {
color: green;
}
style>
head>
body>
div class="head">老男孩div>
div>
a href="http://www.sb.com">李杰a>
div>
p class="head">武沛齐p>
body>
html>
2.4 属性选择器
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
style>
/* 找到class=head并且name=boy的标签 */
.head[name="boy"] {
color: green;
}
style>
head>
body>
div class="head" name="boy" >老男孩div>
div>
a href="http://www.sb.com">李杰a>
div>
p class="head" name="hanshuo" >韩烁p>
body>
html>
2.5 后代选择器
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
style>
.head ul .hat {
color: green;
}
style>
head>
body>
a href="#">老男孩a>
div class="head">
a class="hat">北京a>
ul>
li>沙河li>
li>
a class="hat">沙河高晓松Alexa>
li>
li>
a>沙河大烧饼Alexa>
li>
ul>
div>
div class="head">
a href="#">武沛齐a>
div>
body>
html>
2.6 选择器分组
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>CSS学习title>
style>
/* 不推荐写法 */
/*
h1 {
color: green;
}
.head h2{
color: green;
}
h3{
color: green;
}
h4{
color: green;
}
*/
h1, .head h2, h3, h4 {
color: green;
}
style>
head>
body>
h1>kobeh1>
div class="head">
h2>lebronh2>
div>
h3>curryh3>
h4>jamesh4>
body>
html>