admin 管理员组

文章数量: 887021

1.CSS简介

CSS的主要使用场景就是美化网页，布局页面的。

1.1HTML的局限性

说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如

表明这是一个大标题，

表明这是一个段落，表明这儿有一个图片，表示此处有链接。

1.2 CSS-网页的美容师

CSS是层叠样式表(Cascading Style Sheets)的简称.
有时我们也会称之为CSS样式表或级联样式表。

总结:

  1. HTML主要做结构,显示元素内容.
  2. CSS美化 HTML,布局网页.
  3. CSS最大价值:由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS）相分离。

1.3 CSS语法规范

使用HTML时，需要遵从一定的规范，CSS也是如此。要想熟练地使用CSS对网页进行修饰，首先需要了解cSS样式规则。

CSS规则由两个主要的部分构成∶选择器以及一条或多条声明。

  • 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 属性和属性值之间用英文 “:” 分开
  • 多个“键值对”之间用英文 “;” 进行区分

1.4 CSS代码风格

1.样式格式书写

①紧凑格式
h3 { color: deeppink; font-size: 20px; }
②展开格式
h3 {
color: pink;
font-size: 20px;
}

2.样式大小写

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

3.空格规范

h3 {
color: pink;
}
①属性值前面，冒号后面，保留一个空格

②选择器（标签）和大括号中间保留空格

2.CSS基础选择器

2.1CSS选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。

**选择器**分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

2.2标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法

标签名{
属性1: 属性值1;

​ 属性2: 属性值2;

​ 属性3: 属性值3;…

​ …

​ }


    <span>
        一二三四五，上山打老虎。
    </span>
   
       <style>
        
        span {
     
       color: red;
             }
       </style>

作用
标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的 标签。

优点
能快速为页面中同类型的标签统一设置样式。

缺点
不能设计差异化样式，只能选择全部的当前标签。

2.3类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法

结构需要用class属性来调用 class 类的意思

<div class= 'red'> 变红色 </div>

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“".”号显示。
注意
①类选择器使用“.”（英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的)。

②可以理解为给这个标签起了一个名字，来表示。

③长名称或词组可以使用中横线来为选择器命名。

④不要使用纯数字、中文等命名，尽量使用英文字母来表示。

⑤命名要有意义，尽量使别人一眼就知道这个类名的目的。

⑥命名规范:见附件( Web前端开发规范手册.doc )

记忆口诀∶样式点定义，结构类调用。一个或多个，开发最常用。

<h2 class="red">目录</h2>
<p class="red">哈哈</p>

    <style>
       .red{
     
           color: rgb(32, 240, 77);
           }

    </style>

案例：

用类选择器画盒子

<head>
<style>
     .bg {
     
         width: 100px;
         height: 100px;
         <!--背景颜色-->
         background-color: red;
     }
     .bg2 {
     
         width: 100px;
         height: 100px;
         background-color: green;
     }
</style>

</head>
<body>
    <div class="bg"></div>
    <div class="bg2"></div>
    <div class="bg"></div>
</body>

2.4类选择器-多类名

1.多类名使用方式

<div >亚瑟</ div>

(1)在标签class属性中写多个类名
(2)多个类名中间必须用空格分开

⒉多类名开发中使用场景
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面.

(2)这些标签都可以调用这个公共的类然后再调用自己独有的类.

(3)从而节省CSS代码,统一修改也非常方便.

<head>
<style>
     .box {
     
         width: 100px;
         height: 100px;
     }
     .bg {
     
         
         background-color: red;
     }
     .bg2 {
     
         
         background-color: green;
     }
</style>

</head>
<body>
    <div class="box bg"></div>
    <div class="box bg2"></div>
    <div class="box bg"></div>
</body>
</html>

2.5 id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以“#"来定义。

语法
#id名 {
属性1:属性值1;

​ …

}

例如，将id为nav元素中的内容设置为红色。
#nav {
color : red ;

}

<style>
      #pink{
     
          color: pink;
      }
 </style>   
 
 <div id="pink">杨洋</div>

注意:id属性只能在每个HTML文档中出现一次。口诀:样式#定义,结构id调用,只能调用一次别人切勿使用.

id选择器和类选择器的区别
①类选择器( class )好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

②id选择器好比人的身份证号码，全中国是唯一的，不得重复。

③id选择器和类选择器最大的不同在于使用次数上。

④类选择器在修改样式中用的最多, id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

2.6通配符选择器

 <style>
     
 <!--这里把<html> <body> <p> <ul> <li>等等所有标签都改成了红色-->
     
 *{
     
        color: red;
    }
  </style> 
  
      <p>雯雯</p>
    <ul>
        <li>我的</li>
        <li>都是我的</li>
    </ul>

2.7基础选择器总结

3.CSS字体属性

3.1字体系列

<body>

    <style>
        h2 {
     
            font-family: "宋体";
        }
    </style>
    
    <h2>秋夜曲</h2>

    <h4>作者：王维</h4>
    
    <p>桂魄初生秋露微，轻罗已薄未更衣。</p>
    
    <p>银筝夜久殷勤弄，心怯空房不忍归。</p>

</body>

3.2字体大小

3.3字体加粗


<style>
        .bold {
     
            /* 字体加粗样式 */
            /* font-weight: bold; */
            /* 数字后面不用跟单位，等价于bold,都是加粗的效果 */
            font-weight: 100;
        }
</style>
    
    <p class="bold">拼死也要克服</p>

3.4字体样式

3.5字体复合属性

<style>
div {
           font:italic 700 16px 'Microsoft YaHei';
       }
 <style>   
 
       <div>三生三世十里桃花，一心一意百行代码</div>

3.6字体属性总结

4.CSS文本属性

4.1颜色color属性

三种表达方式：

color: red; 或 color: #888888; 或color：#FFFFFF;

4.2对齐属性text-align

4.3text-dcoration

4.4缩进text-indent

4.5行间距line-height

4.6总结

5.CSS引入方式

5.1内部样式表

5.2行内样式表

一般使用的少，只有对当前标签元素添加简单的样式时可以考虑使用，不推荐

5.3外部样式表(推荐)

1.单独建一个.css文件，所有css代码都写在此文件中，之后把css文件引入到HTML中使用

2.在HTML页面中，使用标签引入这个文件。

<link rel="stylesheet" href=".css文件路径">

开发中常用的链接方式推荐使用！！！

5.4总结

==注 意：==图片标签无法使用text-align :center;居中对齐，可以放在p标签里，给 父标签p 居中对齐

.pic {
    text-align: center;
}

    <p class="pic">
        <img src="../images/bg.jpg" alt="天气" />
    </p>

6.代码调试工具

f12快捷键打开控制台

7.Emmet语法

7.1快速生成HTML结构语法

7.2快速生成css结构语法

7.3快速格式化文档

VScode中 在HTML文件中鼠标右键——>格式化文档

快捷键：shift+alt+F

8.CSS复合选择器

8.1什么是复合选择器

8.2后代选择器(重要)

8.3子选择器(重要)

8.4并集选择器(重要)

8.5伪类选择器

1.链接伪类选择器(上)

a:link      /*选择所有未被访问的链接*/
a:visited   /*选择所有已被访问的链接*/
a:hover     /*选择鼠标指针位于其上的链接*/
a:active    /*选择活动链接(鼠标按下未弹起的链接)*/

<html>
    <style>
      /* a:link 未访问的链接 */

      a:link {
     
        color: #333;
        text-decoration: none;
      }
      /* a:visited 选择已被点击(访问)过的链接  */
      a:visited {
     
        color: orange;
      }
      /* a:hover 选择鼠标经过的链接 */
      a:hover {
     
        color: skyblue;
      }
      /* a:active 选择鼠标正在按下还没有弹起的链接 */
      a:active {
     
        color: green;
      }
    </style>
  </head>
  <body>
    <a href="#">小猪佩奇</a>
  </body>
</html>

2.链接伪类选择器(下)


8.6 :focus伪类选择器

<html> 
<style>
      input:focus {
     
        background-color: pink;
      }
    </st

本文标签： 笔记 详细 css

版权声明：本文标题：CSS详细笔记 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1725921428h893074.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。