CSS基础前篇

于 2023-07-27 21:58:47 发布
阅读量70 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79112482/article/details/131969388
版权

1. CSS概述

前言：

  • 最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

  • HTML：定义页面结构，Hyper Text Markup Language，超文本标记语言。

  • CSS：定义结构的表现，Cascading Style Sheets，层叠样式表。

  • JavaScript：定义页面行为，客户端脚本语言。

    概述：

  • CSS 指层叠样式表 (Cascading Style Sheets)；

  • 样式定义如何显示 HTML 元素；

  • 样式通常存储在样式表中；

  • 把样式添加到 HTML 中，是为了解决内容与表现分离的问题；

  • 外部样式表可以极大提高工作效率；

  • 外部样式表通常存储在 CSS 文件中；

  • 多个样式定义可层叠为一个；

2. CSS引入规则

2.1 css语法

选择器+声明{属性名1:属性值1; 属性名2:属性值2; .....   }:

2.2 三种css样式引入规则

插入样式表的方法有三种：

  • 内联样式(Inline style)
  • 内部样式表(Internal style sheet)
  • 外部样式表(External style sheet)

2.2.1 内联样式(Inline style)

<body>
    <!-- 内联样式 -->
    <p style="font-size: 30px; color: aquamarine;">一叶知秋</p>
</body>

2.2.2 内部样式表(Internal style sheet)

<style>
       p{
          font-size: 30px; 

}
</style>


<body>
       <p>一叶知秋</p>
</body>

2.2.3 外部样式表(External style sheet)

p {
    font-size: 40px;
    color: blueviolet;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="00.css">

</head>
<body>
  
    <p >一叶知秋</p>
</body>

2.2.4 样式引入优先级

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 内部样式 */
        p {
            font-size: 30px;
            color: blue;
        }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="00.css">
</head>
<body>
    <!-- (内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式 -->
    <!-- 就近原则 -->
    <p style="color: brown;">大漠孤烟</p>
</body>

3. 基本选择器

3.1 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

<style>
p{
      font-size:20px;
}

span{
       color:red;
}
</style>
<body>
      <p>
          一叶知秋
      </p>
    <span>
        大漠孤烟
    </span>
</body>

3.2 id选择器

id 选择器根据元素的 id 属性来选择特定的 HTML 元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id 。

<style>
 #name{
      font-size:20px;
}
</style>

<body>
      <p id="name ">
          一叶知秋
      </p>
</body>

3.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

<style>
.name{
      font-size:20px;
}

.color{
       color:red;
}
</style>

<body>
      <p class="name color">
          一叶知秋
      </p>
</body>

3.4 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素

<style>
*{
      font-size:20px;
}
</style>

<body>
      <p>
          一叶知秋
      </p>
    <span>
        大漠孤烟
    </span>
</body>

3.5 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}

最好对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。

h1, h2, p {
text-align: center;
color: red;
}

4. 组合选择器

CSS 组合选择符包括各种简单选择符的组合方式，说明了两个选择器之间的关系。

在 CSS3 中包含了四种组合方式:

  • 后代选择器(以空格 分隔)

  • 子元素选择器(以大于号 > 分隔）

  • 相邻兄弟选择器（以加号 + 分隔）

  • 普通兄弟选择器（以波浪号 ～ 分隔）

4.1 后代选择器 div p

div p{

}

后代选择器用于选取某元素的后代元素。

  <style>
        /* 后代选择器 后代选择器用于选取某元素的后代元素 */
        div p{
            background-color: yellowgreen;
        } 
         
    </style>
 <body>
    <div>
        <p>一叶知秋</p>
    </div>

    <div>
        <span><p>大漠孤烟</p></span>
    </div>
    <p>一枪穿云</p>
</body>

<body>
    <div>
        <p>一叶知秋</p>
    </div>

   <p>大漠孤烟</p>
    <p>一枪穿云</p>
</body>

4.2 子元素选择器 div >p

div >p {

}

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

<style>
       
         /* 子元素选择器 与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。 */
          div>p {
            background-color: blue;
         } 
          
    </style>
</head>
 <body>
    <div>
        <p>一叶知秋</p>
    </div>

    <div>
        <span><p>大漠孤烟</p></span>
    </div>
    <p>一枪穿云</p>
</body>

<body>
    <div>
        <p>一叶知秋</p>
    </div>

   <p>大漠孤烟</p>
    <p>一枪穿云</p>
</body>

4.3 相邻兄弟选择器 div +p

div +p {

}

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

<style>
    
          /* 相邻兄弟选择器 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。 */
          div+p {
            background-color: bisque;
         } 
     
    </style>
</head>
 <body>
    <div>
        <p>一叶知秋</p>
    </div>

    <div>
        <span><p>大漠孤烟</p></span>
    </div>
    <p>一枪穿云</p>
</body>

<body>
    <div>
        <p>一叶知秋</p>
    </div>

   <p>大漠孤烟</p>
    <p>一枪穿云</p>
</body>

4.4 后续兄弟选择器 div ~ p

div ~p {

}

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

<style>
     
         /* 后续兄弟选择器 后续兄弟选择器选取指定元素之后的所有相邻兄弟元素*/
         div ~ p {
              background-color: blueviolet;
         }
    </style>
</head>
 <body>
    <div>
        <p>一叶知秋</p>
    </div>

    <div>
        <span><p>大漠孤烟</p></span>
    </div>
    <p>一枪穿云</p>
</body>

<body>
    <div>
        <p>一叶知秋</p>
    </div>

   <p>大漠孤烟</p>
    <p>一枪穿云</p>
</body>

5. 属性选择器

5.1 [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

 <style>

        a [target]{
            background-color: aquamarine;
        }
        input[type]{
            background-color: rgb(51, 153, 93);
        

    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank"> 百度一下 </a><br>
    
</body>

5.2**[attribute=“value”]** 选择器

[attribute=“value”] 选择器用于选取带有指定属性和值的元素

   <style>

        a [target="_blank" ]{
            background-color: aquamarine;
        }
     
        

    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank"> 百度一下 </a><br>
    <input type="text"  placeholder="账号1"><br>
</body>

5.3设置表单样式

若需为不带 class 或 id 的表单设置样式，属性选择器会很有用：

   <style>

        input[type="submit"]{
            background-color: aquamarine;
        }
        input[type="text"]{
            background-color: greenyellow;
        }
        input[type="password"]{
            background-color: rebeccapurple;
        }
        input[value="name2"]{
            background-color: rgb(153, 51, 70);
        }
       

    </style>
</head>
<body>
    <input type="text"  placeholder="账号1"><br>
    <input type="text"  placeholder="账号2"><br>
    <input type="password"  placeholder="密码1"><br>
    <input type="password" value="name2" placeholder="密码2"><br>
     <input type="submit" value="提交">
</body>

6.css三大机制（重点）

6.1 css样式来源

  • CSS中的样式一共有三种来源：创作人员、读者和用户代理
  • 创作人员的样式 > 读者人员的样式 > 用户代理的默认样式
  • 标记为重要声明（!important）的读者样式 > 一切样式

6.2 css三大机制

6.2.1特殊性

选择器类型：

  1. ID #id
  2. class　　.class
  3. 标签 p
  4. 通用　　*
  5. 属性　　[type=“text”]
  6. 伪类　　：hover
  7. 伪元素　　::first-line
  8. 子选择器、相邻选择器

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

继承的样式没有权值。

  • 注意：!important，权值为10000

       <style>
        /* 继承效果 */
        p{
            font-size: 30px;
            /* 有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志!  */
            color: aqua !important;
        }
        /*  p + .name 叠加效果+继承效果 */

        .name{
            text-decoration: underline;
        }
        /* 特殊性效果+ (.name+#top) 继承效果+叠加效果  #top>p  权重计算规则 */
        #top {
            color: blueviolet;
        }

    </style>
</head>
<body>
    
    <p class="name" id="top"> hello
        <span>hello1</span>
    </p>
</body>

6.2.2继承

CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。

上面提到了一个后代的概念，指的是文档元素之间的一种关系。HTML文档的元素是具有层次结构的，html元素为根元素，其余

的元素均是挂载在其上。这些元素可以以一种树形的结构表示出来，元素的直接上级为父，直接下级为子，同父级的元素为兄弟

元素，元素a若可以通过若干个元素（包括这个元素本身）的父元素联系到另一元素b，则元素a为元素b的后代，相对的元素b为

元素a的祖先。

继承的机制需要注意的点:

并不是所有的属性都可以继承，一般的，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。

   <style>
        /* 继承效果 */
        p{
            font-size: 30px;
            /* 有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志!  */
            color: aqua !important;
        }
        /*  p + .name 叠加效果+继承效果 */

        .name{
            text-decoration: underline;
        }
        /* 特殊性效果+ (.name+#top) 继承效果+叠加效果  #top>p  权重计算规则 */
        #top {
            color: blueviolet;
        }

    </style>
</head>
<body>
    
    <p class="name" id="top"> hello
        <span>hello1</span>
    </p>
</body>

6.2.3层叠

样式的呈现只有一种效果，而仅仅通过特殊性来决定权重并不能完全解决冲突。想象一下，如果两条作用于同一元素的声明，它

的特殊性相同，也就是它们的权重相同时，浏览器应该用哪一条声明呢？这个就与CSS的层叠机制有关了。

文档中的一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠;

   <style>
        /* 继承效果 */
        p{
            font-size: 30px;
            /* 有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志!  */
            color: aqua !important;
        }
        /*  p + .name 叠加效果+继承效果 */

        .name{
            text-decoration: underline;
        }
        /* 特殊性效果+ (.name+#top) 继承效果+叠加效果  #top>p  权重计算规则 */
        #top {
            color: blueviolet;
        }

    </style>
</head>
<body>
    
    <p class="name" id="top"> hello
        <span>hello1</span>
    </p>
</body>

7.文本

7.1文本颜色 color

color: red #ffffff rgb （ 255，255，255）

<style>
        h1{
            /* 英文颜色  方便快捷准确。 颜色数量有限*/
            color: aqua;

            /* 十六进制颜色  #123456  多用于编程 方便*/
            color: #ffffff;
            
            /* 红绿蓝三原色配色方式 方便 (225,225,225) */
            color: rgb(220,25,20);
        }

        p{  color: blue;
            font-size: 20px;
            text-align: center;

            /* text-align: right;    右对齐
               text-align: left;     左对齐
               text-align: justify;  两端对齐 */
        }

    </style>
</head>
<body>
    <h1>全职高手</h1>
    <p>《全职高手》是根据蝴蝶蓝同名电竞小说改编的网络动画，分为正式剧集和特别篇。
        该作以网游顶尖高手叶修为主角，讲述了他被俱乐部驱逐，离开职业圈并成为网吧网管后，在荣耀第十区重新投入了游戏并重返巅峰之路的故事。
    </p>
    <p><span>一叶知秋</span></p>
    <p><input type="text"></p>
    <p><img src="../作业.html/2.png" alt="图标"></p>
    <!-- 行内元素或行内块元素可以居中，块级元素不可以 -->
    <p><h1>你是谁？</h1></p>
    
    
</body>

7.2文本对齐 text-align

text-align ：center left right

<style>
       

        p{  color: blue;
            font-size: 20px;
            text-align: center;

            text-align: right;    右对齐
             text-align: left;     左对齐
             text-align: justify;  两端对齐 
        }

    </style>
</head>
<body>
    
    <p>《全职高手》是根据蝴蝶蓝同名电竞小说改编的网络动画，分为正式剧集和特别篇。
        该作以网游顶尖高手叶修为主角，讲述了他被俱乐部驱逐，离开职业圈并成为网吧网管后，在荣耀第十区重新投入了游戏并重返巅峰之路的故事。
    </p>
    <p><span>一叶知秋</span></p>
    <p><input type="text"></p>
    <p><img src="../作业.html/2.png" alt="图标"></p>
    <!-- 行内元素或行内块元素可以居中，块级元素不可以 -->
    <p><h1>你是谁？</h1></p>
    
    
</body>

7.3垂直对齐 vertical-align

vertical-align : top bottom middle baseline

 <style>
         /* 一般情况，默认文字与图片基线对齐 */
        img{
            width: 100px;
            height: 100px;
            /* 顶部对齐
            vertical-align: top;
             基线对齐
            vertical-align: baseline;
             底部对齐
            vertical-align: bottom; */
            /* 中部对齐 */
            vertical-align: middle;


        }
    </style>
</head>
<body>
     股票分析图 <img src="/images/股票.png" alt="">
</body>

7.4文本装饰 text-decoration

text-decoration

   <style>
  /* text-decoration: none; 通常用于从链接上删除下划线 */
  
        h2 {
          /* text-decoration: overline; 通常用于加上划线 */
            text-decoration: overline;
             /* text-decoration:underline; 通常用于加下划线 */
            text-decoration: underline;
        }
        a {
            text-decoration: none;
        }
        .old-price {
        /* text-decoration: line-through; 通常用于删除线 */
            text-decoration: line-through;
        }
        .now-price {
            font-size: 20px;
            color: red;
        }
        
            
    </style>
</head>
<body>
    <h2>大漠孤烟</h2>
    <a href="#">百度一下，你就知道了</a>
    
    <p>
    一叶知秋原价:<span class="old-price">998</span> 现价: 
    <span class="now-price">9.9</span>元
    </p>
    
</body>

7.5文本缩进 text-indent

text-indent

   <style>
        p{   
              /* 文本缩进 */
           text-indent: 2em;
        }            
    </style>
</head>
<body>
    
    <p>《全职高手》是根据蝴蝶蓝同名电竞小说改编的网络动画，分为正式剧集和特别篇。
        该作以网游顶尖高手叶修为主角，讲述了他被俱乐部驱逐，离开职业圈并成为网吧网管后，在荣耀第十区重新投入了游戏并重返巅峰之路的故事。
    </p>
    
</body>

7.6字符间距 letter-spacing

letter-spacing:2em

 <style>
        p{   
                 /* 字符间距 */
            letter-spacing: 12px; 
           
        }            
    </style>
</head>
<body>
    
    <p>《全职高手》是根据蝴蝶蓝同名电竞小说改编的网络动画，分为正式剧集和特别篇。
        该作以网游顶尖高手叶修为主角，讲述了他被俱乐部驱逐，离开职业圈并成为网吧网管后，在荣耀第十区重新投入了游戏并重返巅峰之路的故事。
    </p>
    
</body>

7.7文本阴影 text-shadow

text-shadow:(2px 2px 2px red)

   <style>
        h2 {
            /* 文本阴影 水平+垂直+模糊程度+颜色 */
             text-shadow: 10px 5px 1px red; 
     }
    </style>
</head>
<body>
    <h2>大漠孤烟</h2>
    
    
</body>

8.字体

8.1 字体的重要性

  • 选择正确的字体会对网站的用户体验产生巨大影响。

  • 正确的字体可以为商业品牌创造强有力的形象。

  • 使用易于阅读的字体很重要。为字体选择正确的颜色和文本大小也很重要

8.2 font-family 属性

<style>
h2 {
            /* 属性值通常加引号，表示一个整体
                可以使用多个，用逗号隔开 
                系统中自带有字体样式  */
            font-family:楷体,'Times New Roman', Times, serif;
               
        }
</style>

8.3字体样式 font-family

<style>
h2 {
            /* 属性值通常加引号，表示一个整体
                可以使用多个，用逗号隔开 
                系统中自带有字体样式  */
            font-family:楷体,'Times New Roman', Times, serif;
               
        }
</style>

8.4字体粗细 font-weight

<style>
h2 {
  
               /* 字体粗细  正常+变粗+变细+数字调整粗细程度  */
               font-weight: normal;
               font-weight: bold;
               font-weight: lighter;
               font-weight: 600;                
</style>

8.5字体大小

8.5.1像素设置字体px

px

8.5.2 em设置字体大小

绝对单位px（不可以) 相对单位em(可以通过浏览器字体调整字体大小） 1em=16px

8.5.3百分比与em的结合 80%

80%百分比单位

8.5.4响应式字体大小vw

vw响应式字体的单位，随着视口的改变发生改变

8.5.5示范

 h2 {
            
               /* 字体大小 像素，绝对单位+em相对单位+20%百分比单位+vw响应式单位 */
               font-size: 15px;
               font-size: 2em;
               font-size: 20%;
               font-size: 10vw;
        }

8.6整体示范

 <style>
        h2 {
            /* 属性值通常加引号，表示一个整体
                可以使用多个，用逗号隔开 
                系统中自带有字体样式  */
            font-family:楷体,'Times New Roman', Times, serif;
               /* 字体粗细  正常+变粗+变细+数字调整粗细程度  */
               font-weight: normal;
               font-weight: bold;
               font-weight: lighter;
               font-weight: 600; 
               /* 文字样式  正常+斜体 */
               font-style: normal;
               font-style: italic;
               /* 字体大小 像素，绝对单位+em相对单位+20%百分比单位+vw响应式单位 */
               font-size: 15px;
               font-size: 2em;
               font-size: 20%;
               font-size: 10vw;
        }
        p{
            color: blue;
        }
    </style>
2301_79112482
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值