Html学习之CSS(三)

内容分享1个月前发布 买封冬册信_
0 0 0

什么是CSS
CSS的全称是Cascading Style Sheets，层叠样式表
它用来控制HTML标签的样式，在美化网页中起到超级重大的作用。CSS的编写格式是键值对形式的，列如
color: red;
background-color: blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值

一、CSS的3种书写形式

1、行内样式：（内联样式）直接在标签的style属性中书写

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset="UTF-8”>
    <title>Title</title>
</head>
<body>
<div style="background-color: yellow;color: black">我是div</div>
</body>
</html>

  • 每个标签都有一个style属性
  • 样式直接写在元素的style属性上
  • css样式之间用分号;隔开。在许多国内外资料中,“CSS样式”与”CSS属性”是同义词。background-color 、color既叫样式名也叫属性名；yellow、black既叫样式值也叫属性值

2、页内样式：（文档样式表）将样式写在head元素的style元素中。

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset="UTF-8”>
    <title>Title</title>
    <style type=“text/css”>
        div {
            color: red;
            background: yellow;
        }

        p {
            color: red;
            font-size: 30px;
        }

        h1 {
            color: aqua;
        }
    </style>
</head>
<body>
      <div>我是中国人</div>
      <h1>目录</h1>
      <p>你好</p>
      <p style="color: black">中国</p>
</body>
</html>

  • 将样式写在head元素的style元素中
  • <style>元素的type属性值默认是text/css

3、外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

1.新建一个css文件

Html学习之CSS(三)

Html学习之CSS(三)

  • 在CSS文件中使用@charset指定文件编码，一般都是UTF-8

2、link元素引用css文件

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset="UTF-8”>
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css” >
</head>
<body>
<div >我是div</div>
</body>
</html>

  • 外部样式表将css独立抽成一个文件，这样其他的html文件需要设置这些样式时，只要通过link元素引入即可.
  • <link rel=”stylesheet”>元素的type属性值默认是text/css

另外还可以在style元素或者CSS文件中使用@import导入其他的CSS文件

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset="UTF-8”>
    <title>Title</title>
    <style>
        @import url("css/test.css”);
    </style>
</head>
<body>
<div >我是div</div>
</body>
</html>

不过不提议使用@import导入css文件 ，它的效率比link低。

小总结：
文档样式表、外部样式表，比内联样式多了个“表”字
内联样式只针对某个特定的元素
文档样式表、外部样式表可以针对一堆元素
等价写法

Html学习之CSS(三)

二、CSS属性

按照CSS属性的具体用途，大致可以分类为
文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
字体：font、font-family、font-style、font-size、font-variant、font-weight
背景：background、background-color、background-image、background-repeat、background-attachment、background-position
盒子模型：width、height、border、margin、padding
列表：list-style
表格：border-collapse
显示：display、visibility、overflow、opacity、filter
定位： vertical-align、position、left、top、right、bottom、float、clear

最常用的CSS属性

  • color：前景色（文字颜色）
  • background-color：背景色
  • width ：宽度
  • height：高度
  • font-size：文字大小

三、选择器

1、元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         div {
             background-color: red;
         }
    </style>
</head>
<body>
<div>我是元素选择器，可以叫我标签选择器</div>
</body>
</html>

2、通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         * {
             color: red;
         }
    </style>
</head>
<body>
<div>我是div</div>
<h1>我是h</h1>
</body>
</html>

  • 一般用来给所有元素做一些通用性的设置，列如内边距、外边距。
  • 尽量不要使用，效率比较低

3、id选择器

<!DOCTYPE html>                         
<html lang="en">                        
<head>                                  
    <meta charset="UTF-8">              
    <title>Title</title>                
    <style>                             
                                        
          #the-first-element{           
              color: red;               
          }                             
                                        
          #the_two_element{             
              color: blue;              
          }                             
                                        
          #theThirdElement{             
              color: black;             
          }                             
                                        
    </style>                            
</head>                                 
<body>                                  
<!--中划线-->                              
<p id="the-first-element">我是p2</p>      
                                        
<!--下划线-->                              
<p id="the_two_element">我是p3</p>        
                                        
<!--驼峰标示-->                             
<p id="theThirdElement">我是p4</p>        
</body>                                 
</html>

  • 一个HTML文档里的id是唯一的，不能重复。
  • id值如果由多个单词组成,单词之间可以用中划线-、下划线_、驼峰标示。
  • 用#id值去取元素，如#theThirdElemen， #the_two_element，#the-first-element
  • id的值不能以数字开头，有些浏览器不支持

3、类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           .btn{
               background-color: red;
               width:60px;
               text-align: center;
           }


           .confirm{
               color: black;
           }

           .cancell{

               color:blue ;
           }

           .delete{
               color: aqua;``
           }
    </style>
</head>
<body>
     <p class="btn confirm">红</p>
     <p class="btn cancell">黄</p>
     <p class="btn delete">绿</p>
</body>
</html>

  • 一个元素可以有多个class值，每个class之间用空格隔开。在开发中可以将一些公共样式抽出来，写到某个类选择器中。谁要使用这些样式加上类名就可以了。
  • 用 .class值去取元素，例如 .confirm， .cancell，.delete

4、属性选择器

4.1、属性值是one

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           [title="one"]{
               color: green;   
           }
    </style>
</head>
<body>
    <div title="one">文字一</div>
    <div title="two">文字二</div>
</body>
</html>

4.2、属性值包含单词one

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           [title~="one"]{
               color: green;
           }

    </style>
</head>
<body>
    <div title="one two">文字一</div>
    <div title="two">文字二</div>
</body>
</html>

4.3、属性值以one为开头的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           [title^="one"]{
               color: green;
           }

    </style>
</head>
<body>
    <div title="one two">文字一</div>
    <div title="two one">文字二</div>
</body>
</html>

5、后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           div span {
               color: red;
           }

    </style>
</head>
<body>
      <div>
           <span>文字</span>
      <p>
           <span>文字二</span>
      </p>
      </div>
</body>
</html>

  • div span {
    }
    div里的span元素，span是直接或者间接的子元素。

6、子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           div>span {
               color: red;
           }

    </style>
</head>
<body>
      <div>
           <span>文字</span>
      <p>
           <span>文字二</span>
      </p>

      </div>
</body>
</html>

  • div>span {
    }
    div里的span元素，span必须是直接子元素。

7、交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          div.one{
              background-color: red;
          }

    </style>
</head>
<body>
      <div class="one">我是div</div>
      <p class="one">我是div2</p>
</body>
</html>

  • 同时符合两个条件或以上的元素

8、并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          div,.one{
              background-color: red;
          }

    </style>
</head>
<body>
      <div >我是div</div>
      <p class="one">我是div2</p>
</body>
</html>

  • 符合条件一+条件二的所有元素，之间用逗号隔开。

四、CSS的特性

4.1、CSS属性的继承

一个元素如果没有设置某属性的值，就会随着父元素的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           div {

               color: blue;

               font-size: 50%;
           }
           body {

               font-size: 30px;
           }
    </style>
</head>
<body>
<div>
     我是div
     <p>我是p</p>
</div>

<div>
    我是div
</div>
</body>
</html>

p元素是div的子元素，虽然p没有设置颜色属性，但是p继承了div元素的属性设置。

div元素是body的子元素，div的实际font-size是30*0.5 = 15px,p元素是div的子元素，p继承了div元素的font-size=15px,而不是继承了font-size: 50%。

  • 不是所有的属性都可以继承，只是一些属性可以继承像color、font-size等属性。
  • CSS属性继承的是计算值，并不是当初编写属性时的指定值。

         div{
             width: 80px;
             height: 80px;
             background-color: red;
         }
         p{
             height: inherit;
             background-color:green;
         }

  • 不能继承的属性，一般可以使用inherit值强制继承。

4.2、CSS属性的优先级

Html学习之CSS(三)

例2.1、id>类选择器>元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            color: red;
        }
        .word{
            color: blue;
        }
        div{
            color: green;
        }
    </style>
</head>
<body>
<div id="box" class="word">一段文字</div>
</body>
</html>

  • 针对性越强的选择器，优先级越高
    !important > 内联样式 > id > class、属性、伪类 > 标签（元素）、伪元素 > 通用（*）

例子2.2 类选择器 = 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      [title="name"]{
          color: red;
          font-size: 60px;
      }
      .word{
          color: yellow;
      }
    </style>
</head>
<body>
<div id="box" class="word" title="name">一段文字</div>
</body>
</html>

  • .如果优先级一样，就参考就近原则（离元素近的优先级高）

例子2.3 !important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      [title="name"]{
          color: black !important;
          font-size: 60px !important;
          background-color: yellow;
      }
      .word{
          color: yellow;
          font-size: 20px;
          background-color: red;
      }
    </style>
</head>
<body>
<div id="box" class="word" title="name">一段文字</div>
</body>
</html>

  • 用!important修饰的属性优先级可以提高到最高

例子2.4 复杂选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .word#box {
            color: red;
        }
        div#box {
            color:yellow;
        }
    </style>
</head>
<body>
<div id="box" class="word" title="name">一段文字</div>
</body>
</html>

  • 从权值最大的开始比较每一种权值的数量多少，数量多的则优先级高，即可结束比较。如果数量一样，比较下一个较小的值，以此类推。
  • 如果所有权值比较完毕，发现数量都一样，就采取”就近原则”
    总之：选择器的针对性越强，优先级越高。

4.3、CSS属性使用经验

开发过程中所编写的CSS属性没有达到如期的作用，可能是

  • 选择器的优先级太低。
  • 选择器没有选中对应的元素
  • CSS属性的形式使用不对
  • 元素不支持CSS属性,列如span默认是不支持width和height
  • 浏览器不支持CSS属性
  • 被同类型的CSS属性覆盖率，列如font覆盖font-size
© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

暂无评论

您必须登录才能参与评论！
立即登录
none
暂无评论...
头像
买封冬册信_
投稿者
1000
Html学习之CSS(三)

热门网站

日榜周榜月榜
广告违禁词检测

广告违禁词检测

句易网 - 2025年最新广告法淘宝抖音违禁词敏感词在线查询检测工具
易飞文字识别

易飞文字识别

免费在线批量图片文字提取，支持中英文等多种语言的高效准确识别，一键复制文本导出Word。
Yandex站长平台

Yandex站长平台

Yandex ID. The key to all your...
下载之家

新下载之家

下载之家提供新鲜安全的绿色软件、系统软件下载服务.所有软件均由下载之家严格检测,无病毒木马、诱导广告.安全下载绿色软件就到下载之家.
单机游戏下载

新单机游戏下载

逗游网是的绿色单机游戏下载基地，提供单机游戏、网络游戏、好玩的手机游戏一键下载，自动安装，绿色安全！逗游网让您轻松玩游戏！
查看完整榜单

热门文章

日榜周榜月榜
什么是Vue 3 “Vapor Mode”(转)

什么是Vue 3 “Vapor Mode”(转)

头像3周前
1
数据中台建设成本分析：人力+硬件+软件，中小公司预算指南

新数据中台建设成本分析：人力+硬件+软件，中小公司预算指南

头像4天前
1
Android手动命令行编译APK

新Android手动命令行编译APK

头像2天前
1
MATLAB App Designer学习之旅（一）

新MATLAB App Designer学习之旅（一）

头像2天前
1
我们都不卖 | 字节跳动正探索不出售TikTok美国业务的解决方案

新我们都不卖 | 字节跳动正探索不出售TikTok美国业务的解决方案

头像2天前
1
盘点Steam平台10大肉鸽神作！哪一款才是你的“时间黑洞”本命？

新盘点Steam平台10大肉鸽神作！哪一款才是你的“时间黑洞”本命？

头像2天前
1
查看完整榜单

标签云