css基础知识（样式及选择器）

最新推荐文章于 2024-05-16 11:12:54 发布

Y9186

最新推荐文章于 2024-05-16 11:12:54 发布

阅读量385

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/iteuko/article/details/121318987

版权

首先说明css的语法结构：选择器{属性:属性值;属性:属性值;}注意分号是一定要写，不写下面的属性就没效果

一，css引入方式

分为四种引入方式：1，行内样式 2，内嵌样式 3，外链样式 4，导入样式。

1，行内样式（行内样式又称标签样式，就是在标签里加style属性）语法格式:<标签 style="样式:样式名;样式:样式名;"></标签>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title>
</head>
<body>
<h2 style="color:red;text-align:center">这是一个标题</h2>
</body>
</html>

2，内嵌样式（样式写在style标签里面，style标签写在head标签里面）

语法格式:

<head>

     <style type="text/css">

选择器{

样式:样式名

样式:样式名

......

}

选择器{

样式:样式名

样式:样式名

......

}

       

     </style>

</head>

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>css样式</title>
     <style type="text/css">
       h2{
         color:red;
         text-align:center;
         } 
    </style>
</head>
<body>
<h2>这是一个标题</h2>
</body>
</html>

3,外链样式（最标准样式）

第一步：新建一个.css的文件，专门写css样式

第二步：head标签内写入link标签 (link标签可以存在在body标签内，但是不推荐使用)

第三步：link 里href属性将css文件引入（路径（绝对路径和相对路径））

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   /*我这里用的是相对路径*/
   <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    
   <h2>麦田里的守望者</h2>
   <h3>平凡的世界</h3>
   
</body>
</html>

4，导入样式（和外链样式一样需要新建，然后引入）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style type="text/css">
       @import url(1.css);
    </style>
</head>
<body>
   <h2>麦田里的守望者</h2>
   <h3>平凡的世界</h3>
</body>
</html>

二，选择器

基本选择器：1，id选择器 2，类选择器 3，标签选择器 4，通配符选择器

1，id选择器（给标签取一个id名，用符号#id名赋值）注意：值不能为数字或中文

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>id选择器</title>
     <style type="text/css">
       #one{
           color:red;
          }
    
     </style>
</head>
<body>
      <p id="one">小王子</p>
</body>
</html>

2，类选择器（class选择器）是给class属性赋值，然后用.符号与值结合。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>类选择器</title>
     <style type="text/css">
        .one{ 
            color:red;
            }
     </style>
</head>
<body>
    <p class="one">三国演义</p>
</body>
</html>

3，标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8"
     <title>标签选择器</title>
     <style type="text/css">
        h3{
          color:blue;
          }
     </style>
</head>
<body>
   <h3>围城</h3>
</body>
</html>

4，通配选择器（把还没有赋值的标签全部赋值）

<!DOCTYPE>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>通配选择器</title>
     <style type="text/css">
        #one{
          color:red;  
          }
        .one{
          color:blue;  
          }
        p{
         color:cyan;
         }
        *{
        color:pink; 
        }
     </style>   
</head>
<body>
   <h1 id="one">琴</h1>
   <h2 class="one">棋</h2>
   <p>书</p>
   <div>画</div>
   <h3>游</h3>
</body>

包含选择器：1，子代选择器 2，后代选择器 3，分组选择器

1，子代选择器（子元素选择器）需要用大于符号（子结合符）连接。

获取某标签的第一级标签

<! DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>什么的第一级标签</title>
    
</head>
<body>
<h1>
   <p>喜欢<b>看个</b>书</p>
</h1>

</body>
</html>

上面这个代码<h1>标签的第一级标签是<p>标签，<b>标签则是第二级标签

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
       /*用大于符号连接第一级子标签*/
       h1 > strong {color:red;}
</style>
</head>

<body>
<h1>There is <strong>very</strong> <strong>very</strong> hot.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

2，后代选择器（选取一个标签内的所有子标签，不分等级）。格式：标签子标签

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
  <style type="text/css">
    ul em {color:red; font-weight:bold;}
  </style>
</head>
<body>
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

3，分组选择器（把想要有相同效果的标签放在一起，用逗号隔开）

<html>
<head>
<style type="text/css">
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
</style>
</head>

<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html>

属性选择器（四种）

一，简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

格式[属性]

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>属性选择器</title>
     <style type="text/css">
       [title]{color:red;}
     </style>
</head>
<body>
     <div title="one">这是一个div</div>
     <div title="two">这是第二个div</div>
</body>
</html>

二，根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>属性选择器</title>
     <style type="text/css">
       div[title="one"]{color:red;}
     </style>
</head>
<body>
     <div title="one">这是一个div</div>
     <div title="two">这是第二个div</div>
</body>
</html>

三，根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>属性选择器</title>
     <style type="text/css">
       div[title~="one"]{color:red;}
     </style>
</head>
<body>
     <div title="one">这是一个div</div>
     <div title="two one">这是第二个div</div>
</body>
</html>

四，子串匹配属性选择器

任何属性都可以使用这些选择器

类型	描述
[title^="o"]	选择 title 属性值以 "o" 开头的所有元素
[title$="o"]	选择 title 属性值以 "o" 结尾的所有元素
[title*="r"]	选择 title 属性值中包含子串 "r" 的所有元素

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>属性选择器</title>
     <style type="text/css">
       [title^="o"]{
       	color: red;
       }
       [title$="o"]{
       	color: blue;
       }
       [title*="r"]{
       	color: pink;
       }
     </style>
</head>
<body>
     <div title="one">这是一个div</div>
     <div title="two">这是第二个div</div>
     <div title="three">这是第三个div</div>
     <div title="four">这是第四个div</div>
</body>
</html>

五，特定属性选择类型

[属性|=值]

用于选取带有以指定值开头的属性值的元素，该值必须是完整单词

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>属性选择器</title>
     <style type="text/css">
       *[title|=two]{
       	color: red;
       }
     </style>
</head>
<body>
     <div title="one">这是一个div</div>
     <div title="two-one">这是第二个div</div>
     <div title="two">这是第三个div</div>
     <div title="four">这是第四个div</div>
</body>
</html>

Y9186

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css基础知识（样式及选择器）

首先说明css的语法结构：选择器{属性:属性值;属性:属性值;}注意分号是一定要写，不写下面的属性就没效果一，css引入方式分为四种引入方式：1，行内样式 2，内嵌样式 3，外链样式 4，导入样式。1，行内样式（行内样式又称标签样式，就是在标签里加style属性）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css样式</ti...
复制链接

扫一扫