CSS基础必备知识点01

最新推荐文章于 2022-07-29 23:59:40 发布
最新推荐文章于 2022-07-29 23:59:40 发布
阅读量409 收藏
点赞数 1
分类专栏： 前端初级H5+C3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38148024/article/details/101712029
版权

CSS基础必备知识点

CSS（Cascading Style Sheme）， 层叠样式表或级联样式表，简称样式表。它的作用是给HTML网页设置外观或者样式。其中外观或者样式指的是：HTML网页中的文字大小、颜色、字体，网页的背景颜色、背景图片等。

(一) CSS的语法规则

  • CSS代码是由选择器和一对花括号组成, 即：选择器：{语句1;语句2;…}
  • 花括号里面是一条一条的声明语句组成
  • 每一条语句都要使用英文状态下的分号隔开
  • 每一条声明语句，是由“属性：值”组成。
  • CSS中的属性值一般不加 引号“ ”
  • CSS中如果属性值为数值型数据，一般情况下需要加单位，一般是px
  • 在CSS中不能出现HTML标签
<html>
    <head>
        <title></title>
        <style type="text/css">
    /*在这里书写css代码*/
    p{
        color: #ff0000; /*给文本设置颜色*/
        font-size: 30px; /*设置字体大小*/
    }
    </style>
    </head>
    <body>
        <p>TensorFlow 是一个开源的、基于 Python 的机器学习框架，它由 Google 开发，并在图形分类、音频处理、推荐系统和自然语言处理等场景下有着丰富的应用，是目前最热门的机器学习框架。</p>
    </body>
</html>

(二)CSS代码的书写方式

  1. 嵌入式：

    • 什么是嵌入式？

      • 将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的<style>标签将css代码嵌入到HTML网页中。
      • 语法规则：
      <style type="text/css">
   /*书写CSS代码*/
   选择器：{属性：值;属性：值}
</style>

      如果我们使用的是HTML5的文档，type属性可以省略不写。
      注意：style标签可以放在HTML文件的任何位置，但是一般放在head标签里面。

      <html>
   <head>
       <title></title>
       <style type="text/css">
   /*在这里书写css代码*/
   
   div{
       width: 100px;  /*设置div盒子的宽度*/
       height: 100px; /*设置div盒子的高度*/
       background-color: #df6e94c9;  /*将div盒子的背景颜色设置为粉色*/
       }
       </style>
   </head>
   <body>
       <!--要使用CSS代码给div设置宽度100像素高度100像素以及背景颜色为红色，把div理解为一个存放东西的盒子。-->
       <div></div>
   </body>
    ```
  2. 外链式：
    • 什么是外链式？
      • 外链式是指单独写一个.css为扩展名的文件，然后在head标签中使用<link />标签，将这个css文件链接到HTML文件中。这个css文件在命名时要使用英文，不能使用中文命名。
      • 注意：css文件不能单独的运行，必须依赖于HTML文件
    • 基本语法格式：
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外链式</title>
    <!--将单独的css文件链接到当前的HTML文件中-->
    <link rel="stylesheet" href="CSS文件的地址"> <!--rel是关系的意思，指的是我们引用的文件与该文件是什么关系，样式表的关系-->
</head>
<body>
    
</body>
</html>
      如下为一个css文件的书写方式
      /*
在这个index.css文件中书写css代码
在这个文件里面，只能书写css格式的代码，不写style标签，直接按如下格式书写：
选择器{属性：值；}
*/
body{
    background-color:rgb(66, 235, 221);
}
      呈现的效果就是，运行HTML文件，背景会变为浅蓝色
      使用这种方法，一定要确保css文件已经被正确的成功引入！检测方法为：在当前HTML呈现的网页页面，右键单击检查，点击Network选项卡，然后刷新当前网页，查看network选项卡中的status状态，如果是成功的就表示文件被加载，如果是失败状态就表示文件没有被加载，失败的原因可能是地址写错也可能是文件名写错，注意检查。
    • link标签可以有多个，即一个HTML页面可以同时引入多个单独的css文件
  3. 行内式：
    • 什么是行内式？
      • 将css代码书写在HTML标签的style属性中。style属性是一个通用属性，每一个标签里面都拥有这个属性！语法格式为：
        <标签名 style="属性1：值1；属性2：值2；"></标签名>
        例如：
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内式</title>
</head>
<body>
    <!--使用行内式的方式，将div设置为宽度100px  高度 100px 背景颜色是红色-->
    <div style="width: 100px;height: 100px;background-color: #f00;"></div>
</body>
</html>
    • 小结：
      • 使用嵌入式的方式来书写css代码，只能作用于当前的HTML文件
      • 使用外链式的方式来书写css代码，可以作用于多个HTML文件
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内式</title>
    <!--在刚才使用行内式编写的HTML文件中引入index.css这个单独的css文件-->
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!--使用行内式的方式，将div设置为宽度100px  高度 100px 背景颜色是红色-->
    <div style="width: 100px;height: 100px;background-color: #f00;"></div>
</body>
</html>

(三)注释

  • 注释的格式：/* 注释的内容 */
  • sublime中注释的快捷键：Ctrl + shift + /
  • 注意：千万不要在css中使用HTML注释，两种注释方式要区分开

(四)选择器

什么是选择器？
- 选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
- 选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。
  1. 基本选择器
选择器格式含义举例
通用选择器*{属性:值;}通用选择器将匹配HTML所有标签。不建议使用，IE6不支持，给大型网站增加负担*{margin:0px;}
标签选择器标签名{属性:值;}标签选择器，匹配对应的HTML标签p{font-size:14px;}
类选择器.class属性值{属性:值;}类选择器，给拥有指定的class属性值的元素设置样式.box{width:800px;}
Id选择器#Id属性值{属性:值;}Id选择器可以为标有特定Id的HTML元素指定特定的饿样式，只能使用一次，Id选择器以“#”来定义#title{font-size:14px;}

通用选择器(通配符选择器)举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通用选择器</title>
    <style>
        /*使用嵌入式
        使用通用选择器来设置样式
        格式： *{属性:值;}
        作用： 给HTML中的所有标签设置颜色
        */
        *{
            color: #00f;  /*给文本设置颜色*/
        }
    </style>
</head>
<body>
    <h2>请回答出中国的四大名著</h2>
    <!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>红楼梦</li>
    </ul>
    <p>
        四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
        。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
    </p>
</body>
</html>

标签选择器举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签选择器</title>
    <style>
        /*使用嵌入式
        使用标签选择器来设置样式
        格式： 标签名{属性:值;}
        作用： 给h2标签设置颜色
        */
        h2{
            color: #00f;
            /*给文本设置颜色*/
        }
    </style>
</head>

<body>
    <h2>请回答出中国的四大名著</h2>
    <!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>红楼梦</li>
    </ul>
    <h2>请对四大名著做出简要陈述</h2>
    <p>
        四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
        。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
    </p>
</body>

</html>

类选择器举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类选择器</title>
    <style>
        /*使用嵌入式
        使用类选择器来设置样式
        格式： .class属性值{属性:值;}
        只要是class属性值为h的标签，不管它是什么标签，都会设置样式
        */
        .h{
            color: #cf6da6;
        }
        /*先找到p标签，然后再去找p标签里面有没有class的属性值h1，如果有，就给其设置样式*/
        p.h1{
            color: #e6a52c;

        }
        
    </style>
</head>

<body>
    <h2 class="h">请回答出中国的四大名著</h2>
    <!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>红楼梦</li>
    </ul>
    <h3 class="h1">请对四大名著做出简要陈述</h3>
    <p class="h1">
        四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
        。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
    </p>
</body>

</html>

Id选择器举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签选择器</title>
    <style>
        /*使用嵌入式
        使用Id选择器来设置样式
        格式： #id的属性值{属性:值;}
        作用：给拥有指定的id属性值来设置样式，但是要注意在一个HTML文件中，id的属性值必须是唯一的
        */
        #h{
            color: #b91e1e;
        }
        
    </style>
</head>

<body>
    <h2 id="h">请回答出中国的四大名著</h2>
    <!--使用 ul>li*4 可以创建一个含有4个li 的无序列表-->
    <ul>
        <li>西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>红楼梦</li>
    </ul>
    <h2>请对四大名著做出简要陈述</h2>
    <p id="h1">  
    	需要注意的是：在一个页面中ID选择器的值必须是唯一的，就类似于人的身份证号码，只能使用一次，不能重复。ID选择器与类选择器的最大不同在于使用次数的不同。
        四大名著是中国文学史中的经典作品，是世界宝贵的文化遗产 [1]
        。此四部巨著在中国文学史上的地位是难分高低的，都有着极高的文学水平和艺术成就，细致的刻画和所蕴含的深刻思想都为历代读者所称道，其中的故事、场景、人物已经深深地影响了中国人的思想观念、价值取向。可谓中国文学史上的四座伟大丰碑。
    </p>
</body>

</html>
  1. 复合元素选择器 (这三种选择器在后面详细展开)
  2. 伪类选择器
  3. 属性选择器

(五)尺寸样式属性

属性值含义
heightauto：自动，浏览器会自动计算高度；length：使用px定义高度；%：基于包含它的块级对象的百分比高度设置元素高度
width同上设置元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>尺寸样式属性</title>
    <style type="text/css">
        /*使用类选择器设置样式*/
        .box{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
        span{
             width: 100px;
             height: 100px;
             background-color: #46bce0;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    <span>abcde</span>
</body>
</html>

注意：span标签不可以设置宽度和高度，因为span标签是行内元素，它是不可以设置高度与宽度的，只有块级元素才可以设置高度和宽度！以上虽然设置了span的宽度与高度，但是并没有影响，span的高度与宽度是由它的内容来决定的。

(六)文本与字体属性

1. 文本属性
属性名值含义
color#ff000或red或rgb(3,5,8)给文本设置颜色
text-alignleft(居左)、right(居右)、center(居中)设置文本的水平对齐方式
text-decorationnone(去掉文本修饰线) 、underline(下划线)、overline(上划线)、line-through(删除线)设置文本修饰线
text-transformcapitalize、uppercase、lowercase大小写转换或者首字母大写
line-height固定值或百分比设置行高
text-indentpx或em设置首行缩进，允许负值
letter-spacingpx设置字符间距
word-spacingpx设置单词间距
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>文本属性</title>
   <style type="text/css">
       .zhang{
           /*color:#f00;*/
           color: rgb(255,0,0);
           /*十进制表示颜色的方式在浏览器中没有浏览器兼容的问题*/
           /*给张小凡添加下划线*/
           text-decoration: underline;
           
       }
       h2{

           text-align: center;   /*设置水平居中*/
           text-decoration: overline;/*给诛仙青云志添加上划线*/

       }
       .ywsc{
           text-decoration: line-through;  /*删除线*/
       }
       .cap{
           text-transform: capitalize;  /*设置英文单词首字母大写*/
       }
       .upper{
           text-transform: uppercase; /*将小写全部转换为大写 */
           word-spacing: 20px;  /*设置单词之间的间距*/
       }
       .lower{
           text-transform: lowercase;  /*将大写全部转换为小写*/
           letter-spacing: 20px;  /*设置字母之前的间距*/
       }
       p{
           text-indent: 2em;  /*设置首行缩进，一个em表示一个汉字的位置*/
       }
       .lh{
           /*行高的作用是用来设置文本的垂直方向居中对齐
           设置方式：行高的值与高度值一样即可。
           */
           height: 40px;
           line-height: 40px;
           border: 1px solid #f00;  /*设置边框 1px 实线 红色*/

       }

   </style>
   
</head>
<body>
   <h2>诛仙青云志</h2>
   <p>
       草庙村少年<span class="zhang">张小凡</span>，在经历全村尽灭的惨案后，被青云门收归门下。为报答师门恩情，张小凡勤学苦炼，却因自身驽钝，<span class="ywsc">一无所成</span>。
       陷入迷茫与孤独境遇中的他，幸有鬼王之女碧瑶和好友林惊羽从旁安慰陪伴，渡过了人生最彷徨的阶段。
       张小凡与林惊羽、陆雪琪、曾书书等善良热血的少年们一道，帮助良善，斩妖除恶。一次次的坎坷磨难中张小凡逐渐成长，而与碧瑶的感情，也在患难与共中日渐深厚。
       然而，鬼王为复活兽神并颠覆青云，设下连环阴谋。
       张小凡悍然迎敌，就在命悬一刻之即，碧瑶舍身为他挡下致命的一剑，重伤昏迷，小凡带着沉睡的碧瑶流浪世间。
       鬼王死心不息，卷土重来，最终，张小凡以强大的勇气和信念，挫败鬼王，消弭了正反两派纠葛千年的过节，完成了少年时与碧瑶、林惊羽一众同伴们的约定。
       在少年们的共同努力之下，终换得山河锦绣如画，沃土千里绵延。
   </p>
   <div class="cap">cascading style sheet</div>
   <div class="upper">cascading style sheet</div>
   <div class="lower">CASCADING STYLE SHEET</div>
   <div class="lh">只是一个序号而已没有具体的含义。</div>
</body>
</html>
2.字体属性
属性名值功能
font-stylenormal(正常) 、italic(斜体)设置文本为斜体
font-weightnormal(正常)、 bold设置文字粗细
font-size12px 14px(记得加单位)给文本设置大小
font-family微软雅黑、楷体、宋体…给文本设置字体
font举例:font:italic bold 14px “微软雅黑”简写属性，能够同时给文本设置斜体、加粗、大小、字体，每一个值之间需要使用空格，并且一定要有顺序。
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>字体属性</title>
   <style type="text/css">
       .zhang{
           font-style: italic; /*将文本设置为斜体*/
           font-weight: bold;  /*加粗*/
           font-size: 36px;  /*设置字体大小*/
           font-family: '楷体','宋体';  /*设置字体*/
       }
       .lin{
           font: italic bold 24px "楷体";  /*这里一定要注意书写的顺序*/
       }
   </style>
</head>
<body>
   <h3>诛仙青云志</h3>
   <p>
       草庙村少年<span class="zhang">张小凡</span>，在经历全村尽灭的惨案后，被青云门收归门下。为报答师门恩情，张小凡勤学苦炼，却因自身驽钝，<span class="ywsc">一无所成</span>。
       陷入迷茫与孤独境遇中的他，幸有鬼王之女碧瑶和好友<span class="lin">林惊羽</span>从旁安慰陪伴，渡过了人生最彷徨的阶段。
   </p>
   
</body>
</html>

关于字体：一般很特殊的字体，网站上面都是使用图片来表示的，是否能够显示此字体是根据用户电脑里面是否有对应得字体，如果没有该文件就会显示为宋体。

(七)复合元素选择器

选择器含义举例
选择器1，选择器2{属性:值;}多元素选择器多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号分隔p,h1,h2{margin:0px;}
E F{属性:值;}后代元素选择器后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格隔开#slidebar p{font-color:#990000;}
E>F{属性:值;}子元素选择器子元素选择器，匹配所有E元素的子元素Fdiv>p{color:#990000;}
E+F{属性:值;}相邻元素选择器相邻元素选择器，匹配所有紧随E元素之后的同级元素Fdiv+div{color:#990000;}

多元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>多元素选择器</title>
   <style type="text/css">
       /*多元素选择器格式： 选择器1，选择器2，选择器n{属性：值；}
       作用：给列表中的所有选择器设置样式*/
       div,p,h2,li{
           color: #990000;
           text-decoration: underline;
       }
   </style>
</head>
<body>
   <div>HTML</div>
   <p>CSS</p>
   <h2>PHP</h2>
   <ul>
       <li>北京</li>
       <li>广州</li>
       <li>上海</li>
       <li>深圳</li>
   </ul>
</body>
</html>

后代元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>后代元素选择器</title>
   <style type="text/css">
       /* 后代元素选择器格式： E F{属性:值;} */
       /*作用：匹配.box这个盒子里面的所有的h2后代元素*/
       .box h2{
           color: #f00;
           text-decoration: overline;
       }
   </style>
</head>
<body>
   <!--
       class=box这个元素中有3个子元素，
       第一个子元素是：<h2>HTML</h2>
       第二个子元素是： <div></div>
       第三个子元素是：<h2>PHP</h2>
       并且第二个子元素中还有一个子元素：<h2>CSS</h2>
   -->
   <div class="box">
       <h2>HTML</h2>
       <div>
           <h2>CSS</h2>
       </div>
       <h2>PHP</h2>
   </div>
</body>
</html>

子元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>子元素选择器</title>
   <style type="text/css">
       /* 子元素选择器格式： E > F{属性:值;} */
       /*作用：匹配.box下面的h2子元素，只匹配一级元素，注意与后代元素选择器的区别*/
       .box > h2{
           color: #f00;
           text-decoration: overline;
       }
   </style>
</head>
<body>
   <div class="box">
       <h2>HTML</h2>
       <div>
           <h2>CSS</h2>
       </div>
       <h2>PHP</h2>
   </div>
   
</body>
</html>

相邻元素选择器;

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>相邻元素选择器</title>
   <style type="text/css">
       /* 相邻元素选择器格式： E + F{属性:值;} */
       /*作用：要满足以下前提才会匹配：
       第一点：E元素与F元素必须是兄弟关系，平辈关系
       第二点：E元素与F元素必须要紧挨着，中间没有任何元素阻挡
       第三点：要求F元素一定是在E元素的下面
       匹配.box下面的那个p元素
       */

       .box + p {
           color: #f00;
           text-decoration: overline;
       }
   </style>
</head>

<body>
   <p>我在上面</p>
   <div class="box">
       <h2>HTML</h2>
       <div>
           <h2>CSS</h2>
       </div>
       <h2>PHP</h2>
   </div>
   <h2>CSS</h2>
   <p>我在下面</p>

</body>

</html>

(八)列表样式属性

这里的列表指的是：无序列表和有序列表。整个网页布局中无序列表是使用的最多的。

属性值含义
list-style-typenone(将列表前面的项目符号去掉),disc(实心圆),square(实心小方块),circle(空心圆)设置列表前项目符号的类型
list-style-positioninside(在里面),outside(在外面)设置列表项标记的放置位置
list-style-imageurl(图像路径)将图像设置为列表项标记
list-stylesquare inside url(arrow.gif)在一个声明中设置所有列表属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表样式属性</title>
    <style type="text/css">
        .box ul{
            list-style-type: disc;  
        }
        .box ul li{
            border: 1px solid #f00;
            height: 35px; /*要将文本在一个盒子里面垂直方向居中对齐，要将高度与行高设置为一样大小*/
            line-height: 35px;
            list-style-position: inside;  /*将列表前面的项目符号放在边框的里面*/

            /*将列表前面的项目符号改成一张图片：
            第一步：将列表前面的项目符号去除 list-style-type: none;
            第二步：将列表前面的符号换成一张图片  list-style-image: url(图片的地址);
            */
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>请列出中国著名的四大城市</h2>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
        </ul>
    </div>
</body>
</html>

list-style:这个属性是一个简写属性，他集成了上面三个属性的功能，可以同时设置上面的三个属性。每一个属性值之间使用空格分隔！它的属性值个数可以有一、二或者三个。其属性值个数不定，位置也不定。

/*使用简写属性*/
    list-style: none inside url();

列表样式属性案例分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表样式属性案例</title>
    <style type="text/css">
    /*第一步： 需要给div设置衣蛾边距，并且让这个div在浏览器上面是居中显示的*/
        .box{
            width: 500px;
            border: 1px solid #c72187;
            /*外边距概念：HTML中的表格标记属性 cellspacing
            单元格与单元格之间的距离
            在CSS中盒子与盒子之间的距离也称为外边距  margin*/
            margin-left: auto;  /*将左外边距设置为自动*/
            margin-right: auto; /*将右外边距设置为自动*/
        }

    /*标题设置字体大小，字体类型，加粗，居中; 列表项前面的符号使用自己的图片表示，列表中的内容调整字体颜色，大小*/
        .box h2{
            border: 1px solid skyblue;
            height: 40px;
            line-height: 40px;   /*第二行与第三行的操作是实现标题在表格中垂直居中*/
            color: #f00;
            font-size: 36px;
            font-weight: bold;      /*标题设置加粗效果*/
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
        }
        .box ul li{
            border: 1px solid #ff0;
            height: 30px;
            line-height: 30px;   
            list-style: none url(images/arr.png);
        }

    </style>
</head>
<body>
    <div class="box">
        <h2>频道推荐</h2>
        <ul>
            <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
            <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
            <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
            <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
            <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
        </ul>
    </div>
    
</body>
</html>

(九)伪类选择器

  • 什么是伪类选择器？ 伪类选择器是给超级链接(a标签)的不同状态来设置样式。
  • 超级链接的不同状态：
    • 正常状态：超级链接没有被访问 :link
    • 访问过后状态： 超级链接已经被访问 :visited
    • 鼠标放上状态：鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 :hover
    • 激活状态： 鼠标左键已经按下去了，但是并没有将鼠标的左键弹出 :active
  • 注意：伪类选择器都是带有冒号的":"，超级链接的不同状态是有顺序的，也就是说伪类选择器设置是有顺序的。如果不按照伪类选择器的顺序，那么样式将会失效。
  • 顺序：要遵守“爱恨准则” ，要先有爱才有恨， Love H ate
选择器含义
:link向未被访问的链接添加样式
:visited向已被访问的链接添加样式
:hover当鼠标悬浮在元素上方时，向元素添加样式
:active鼠标放在元素上面时，点击的一瞬间
  • 超级链接的美化
    通常会去掉超级链接的下划线，同时会给超级链接设置一个颜色。
    一般情况下，正常状态与访问过后的状态的样式设置为一样。当鼠标放上的时候给其设置另外一个颜色，激活状态一般不会设置，因为激活状态时间太短。
    格式：
    a:link,a:visited{去掉超级链接的下划线，设置一个颜色}
    a:hover{设置另外一个颜色，增加一个下划线}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>超级链接的美化</title>
  <style type="text/css">
      /*第一步： 需要给div设置衣蛾边距，并且让这个div在浏览器上面是居中显示的*/
      .box {
          width: 500px;
          border: 1px solid #c72187;
          margin-left: auto;
          margin-right: auto;
      }

      .box h2 {
          border: 1px solid skyblue;
          height: 40px;
          line-height: 40px;
          color: #f00;
          font-size: 36px;
          font-weight: bold;
          text-align: center;
          font-family: 'Courier New', Courier, monospace;
      }

      .box ul li {
          border: 1px solid #ff0;
          height: 30px;
          line-height: 30px;
          list-style: none url(images/arr.png);
      }

      /*对超级链接的美化*/
      a:link,a:visited{
          /*去除下划线，设置颜色*/
          text-decoration: none;
          color:#444;
      }
      a:hover{
          color:#f00;
          text-decoration: underline;
      }
  </style>
</head>
<body>
  <div class="box">
      <h2>频道推荐</h2>
      <ul>
          <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
          <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
          <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
          <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
          <li><a href="#">在中国带3公斤冰毒被抓的日本人自称无辜</a></li>
      </ul>
  </div>
  
</body>
</html>

(十)属性选择器

  • 什么是属性选择器？
    • 属性选择器是与标签的属性名和属性值有关
    • 通过标签的属性名和属性值来匹配元素。
选择器含义举例
[attr]匹配所有具有attr属性的元素，不考虑他的值h1[align]{…} input[type][size]{…}
[attr=“val”]匹配所有attr属性值等于val的元素h1[align=“center”]{…}属性值一般加引号
[attr^=“val”]匹配元素中attr属性以指定值开头的所有元素font[color^="#ff"]
[attr$=“val”]匹配元素中attr属性以指定值结尾的所有元素font[color$=“00”]
[attr*=“val”]匹配元素中attr属性中包含指定值的所有元素font[color*=“00”]

attr是英文单词attribute的简写，中文意思是属性 属性名,
val是英文value的简写，属性值
例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style type="text/css">
        /*通过属性选择器来匹配元素*/
        /*第一个：[属性名]{}
        */
        p[align]{   /*先匹配p标签，然后再判断p标签里面是否有align这个标签，如果有就能够匹配到，反之，不能。*/
            color:#f00;
        }

    </style>
</head>
<body>
    <p align="center"> 黑马程序员1</p>      <!--可以匹配到黑马程序员1和黑马程序员3-->
    <h2 align="center">黑马程序员2</h2>
    <p align="left">黑马程序员3</p>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style type="text/css">
        /*通过属性选择器来匹配元素*/
        /*第二个：[属性名="值"]{}*/
        p[align=center]{  
            color:#f00;
        }

    </style>
</head>
<body>
    <p align="center"> 黑马程序员1</p>      <!--可以匹配到黑马程序员1-->
    <h2 align="center">黑马程序员2</h2>
    <p align="left">黑马程序员3</p>
</body>
</html>

例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style type="text/css">
        /*通过属性选择器来匹配元素*/
        /*第三个：[属性名^="值"]{}*/
        font[color^="#ff"]{  /*先找到font标签，然后再来匹配color的属性值以#ff开头的元素*/
            border: 1px solid #00f;
        }

    </style>
</head>
<body>
    <p align="center"> 黑马程序员1</p>      <!--可以匹配到1，2，3，5号颜色-->
    <h2 align="center">黑马程序员2</h2>
    <p align="left">黑马程序员3</p>
    <font color="#ff0000">颜色1</font>
    <font color="#ffAA00">颜色2</font>
    <font color="#ffaabb">颜色3</font>
    <font color="#aacc00">颜色4</font>
    <font color="#ffaadd">颜色5</font>
    <font color="#ddaabb">颜色6</font>
</body>
</html>

例4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style type="text/css">
        /*通过属性选择器来匹配元素*/
        /*第四个：[属性名$=值]{}*/
        font[color$="00"]{  /*先找到font标签，然后再来匹配color的属性值以00结尾的元素*/
            border: 1px solid #00f;
        }

    </style>
</head>
<body>
    <p align="center"> 黑马程序员1</p>      <!--可以匹配到1，2，4号颜色-->
    <h2 align="center">黑马程序员2</h2>
    <p align="left">黑马程序员3</p>
    <font color="#ff0000">颜色1</font>
    <font color="#ffAA00">颜色2</font>
    <font color="#ffaabb">颜色3</font>
    <font color="#aacc00">颜色4</font>
    <font color="#ffaadd">颜色5</font>
    <font color="#ddaabb">颜色6</font>
</body>
</html>

例5：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style type="text/css">
        /*通过属性选择器来匹配元素*/
        /*第五个：[属性名*="值"]{}*/
        font[color*="aa"]{  /*先找到font标签，然后再来匹配color的属性值中包含aa的元素，并且不区分大小写*/
            border: 1px solid #00f;
        }

    </style>
</head>
<body>
    <p align="center"> 黑马程序员1</p>      <!--可以匹配到2，3，4，5号颜色-->
    <h2 align="center">黑马程序员2</h2>
    <p align="left">黑马程序员3</p>
    <font color="#ff0000">颜色</font>
    <font color="#ffAA00">颜色</font>
    <font color="#ffaabb">颜色</font>
    <font color="#aacc00">颜色</font>
    <font color="#ffaadd">颜色</font>
    <font color="#ddaabb">颜色</font>
</body>
</html>
Milly_Liu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS需要掌握哪些知识点
lhw19960418的博客
07-06 1185
1、CSS三种样式表 工作中外部样式表运用较多，原理一样，知识CSS代码书写位置不同 2、CSS代码具体规则 3、CSS选择器（重点） 3.1CSS选择器的作用 选择器就是为了选择特定的HTML元素（标签） 3.2、CSS基础选择器 总的来说，类选择器是我们工作中最常用的 尽量少用通用选择器 尽量少用ID选择器 不使用无具体定义的标签选择器 div span 4、CSS样式属性调试工具 4.1、font字体 4.2、CSS外观属性 ...
HTML、CSS基础知识(网页设计必备50页)
最新发布
05-08
HTML 基础知识点 HTML（HyperText Markup Language）是一种标记语言，用于创建网页的结构和内容。HTML 由一系列的控制标记（Tag）组成，每个控制标记都有其特定的功能和用途。 1. HTML 基本结构 * <html>：根控制...
CSS3必备知识，前端必看 超详解，临考必过
changleqi的博客
04-06 210
前端必看，快速入门，CSS看这一篇就够了
CSS学习-必备知识
qq_52347540的博客
05-02 141
文章目录基本语法标签学习表单标签 基本语法 1.html文档后缀名: .html或者.htm 2.标签分为 围堵标签：有开始和结束标签。例如 自闭标签：开始和结束标签在一起，例如 3.在标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来 4.html的标签不区分大小写，但是建议用小写 标签学习 1.文件标签:构成html最基本的标签 html:html文档的根标签 head:头标签。用于指定html文档中的一些属性。引入外部的资源 title:标题标签。 body:体标签 !DOC
CSS知识总结（一）
weixin_34417635的博客
08-09 89
一.认识CSS 　1.什么是CSS？ 　　CSS (Cascading Style Sheet) 层叠样式表 　　是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 　　由于CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，因此不同的浏览器可能需要不同的前缀。 前缀 浏览器 -webkit chrome和saf...
CSS必备基础知识点
Silas 蝈蝈 博客
02-27 5490
在标签中写，href的值需要单独建一个扩展名为.css的样式文件,注意路径。基本的选择器分别为：标签选择器、类(class)选择器、id选择器。xxxxxxxxxx轴的正方向 就是 前端坐标系的正方向。y轴的负方向 才是 前端坐标系的正方向。y轴的正方向 才是 前端坐标系的正方向。
css大全，考试必备，web开发基础
09-14
css大全，考试必备，web前端开发人员必学，非常详细的css知识点
快速提升CSS编码能力的五个必备知识点
11-07
以下五个必备知识点将帮助你优化CSS编码实践： 1. **CSS定位（Positioning）** CSS定位是控制元素在页面上位置的关键。包括`static`、`relative`、`absolute`、`fixed`和`inherit`五种方式。其中，`static`是...
学习CSS基础过程笔记
03-26
学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...
大学计算机基础大一考试必备题库共17页.pdf.zip
11-08
在大学计算机基础课程中，通常会涵盖以下几个核心知识点： 1. 计算机系统概述：包括计算机硬件（如CPU、内存、硬盘、输入输出设备）和软件（操作系统、应用软件）的基本原理和作用。 2. 数据与信息：数据的定义、...
HTML/CSS中的空格处理及如何保留页面中的空格
11-21
HTML中的空格的规则 在html中内容中的多个空格一般会被视为一个，连续的多个空格符被自动合并了。同时内容前后的空格也会被清除， 如下： <p> fly63 com </p> 显示效果为： fly63 com 备注：浏览器的这种机制处理，同样适用于除了普通的空格键，还包括制表符（\t）和换行符（\r和\n），可以通过使用标签显式表示换行。 HTML空格保留 这时候如果希望HTML中多个连续的空格在网页上能显示，在浏览器中表现出真实的自身空格缩进和换行效果。 我们知道一般有2种方式，使用标签，或者使用 来代表空格。如下： <pre> fly63 com </pre> 或者 &nb
一个js过滤空格的小函数
12-12
过滤空格，尤其是在一些注册页面比较实用，可以用js在客户端将空格过滤掉，在提交服务器入库 代码如下: <html> <head> <title>过滤空格</title> [removed] var i = 0; [removed]=function(event){ if(i==1){ window.open(‘//www.jb51.net’); } //setTimeout(function (){window.open(‘//www.jb51.net’)},2000); i++; }; var j = 0; document.
CSS基础必备知识点03
qq_38148024的博客
10-07 166
1、标准文档流 什么是标准文档流？ 制作HTML网页和PS画图软件画图有本质上的区别：HTML网页在制作的时候都遵循一个“流”的规则：从左到右、从上到下；使用PS软件画图时，我们想在哪里画就可以在哪里画 标准文档流需要注意的事项： 空白折叠现象 换行会造成空白，如何实现没有空白的现象： 需要让这些元素放在同一行，让他们紧密相连。 高矮不齐，底部对齐 2、浮动 需求： 能够实现...
css基础知识
健康平安的活着的专栏
05-12 1875
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础知识（一）
Liu Feng's Blog
07-08 876
CSS 层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串樣式列表、级联样式表、串接样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。 使用优点： 简化网页的代码，提高访问速度 都建立公共样式库，便于重用样式 便于修改网站的样式 方便团队开发 CSS基本语法 选择器 {属性：值；属性：值}...
CSS基本知识点总结
qq_40046544的博客
07-29 9414
CSS指的是层叠样式表（CascadingStyleSheets）CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素CSS节省了大量工作。它可以同时控制多张网页布局。盒子的概念页面中的每一个标签都可以看做是一个盒子；通过盒子的视角，可以更方便的进行布局浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域，我们也形象称之为盒子盒子模型内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成。...
自动去除空格的html 代码,[html]简单去除输入框内的空格的代码 | 何连超的博客小站...
weixin_35971787的博客
05-30 414
js代码如下：function replaceSpace(obj){obj.value = obj.value.replace(/\s/gi,'')}input调用如下：唯一的缺点是表单里的内容需要点击一下才可以去除里边的空格。有大佬指导一下不需要点击相关内容就能去除input表单里的空格么？找到原因，请看下边两节代码的差异:"/>"/>原因就在于这个条件句里边包含的空格，导致坑爹！所...
2.2、CSS选择器
ShawnYue_08的博客
07-04 214
文章目录CSS选择器基础选择器ID选择器类选择器标签选择器选择器的优先级选择器的分组层次选择器后代选择器子元素选择器相邻兄弟选择器通用选择器伪类选择器属性选择器 CSS选择器 选择器的作用就是根据不同需求，把不同的标签选择出来。 基础选择器 ID选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type=
div css（层叠样式表）入门
weixin_30596023的博客
05-21 124
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span style="font-s...
PHP面试必备知识点：HTML与CSS基础
"PHP面试题宝典（上卷基础篇）" 在PHP面试中，了解基础知识是至关重要的。...本文将对其中涉及的HTML和CSS部分进行详细的解释。...因此，对这些基础知识的深入理解不仅有助于面试成功，也有助于在实际开发中解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值