CSS学习-CSDN博客

一、CSS概述

二、CSS的三种引入方式

(一)直接使用style标签编辑样式(调试样式代码时使用)

(二)使用link标签引入CSS文件(上线时使用)

(三)内嵌式(尽量不用，后期维护麻烦)

三、CSS常用选择器

(一)标签选择器(通过html标签选择元素)

(二)class选择器(通过class值选元素)

(三)id选择器(通过id值选元素，在CSS中用的少)

一、CSS概述

CSS 层叠样式表。英文全称：(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说，美化页面(位置、大小、颜色、背景等......)。

CSS语法结构：

选择器{ // 根据元素特征选择元素
    样式: 样式值;
    样式: 样式值;
}

// 例如：
h1{
   color: red;
}

二、CSS的三种引入方式

(一)直接使用style标签编辑样式(调试样式代码时使用)

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
      h1{
          color: red;
      } 
  </style>  
</head>
<body> 
  <h1>我的标题</h1>
</body>

效果：

(二)使用link标签引入CSS文件(上线时使用)

可以使用三种路径：相对路径、相对根路径、绝对路径

创建外部\day2_css\css\mystyle.css文件

h1 {
  color: green;
}
h2 {
  color: blue;
}

rel="stylesheet"代表引用样式表

 <head>  
	<!-- 相对根路径 -->
    <link rel="stylesheet" href="\day2_css\css\mystyle.css">
    <!-- 相对路径 -->
    <link rel="stylesheet" href="./css/mystyle.css">
    <!-- 绝对路径 -->
    <link
      rel="stylesheet"
      href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"
    />
  </head>
  <body>
    <h1>相对根路径</h1>
    <h2>相对路径</h2>
    <h3 class="animated bounce">绝对路径</h3>
  </body>

效果：

浏览器会把html、css文件一起进行解析，如果后面有js文件，也会被浏览器解析

(三)内嵌式(尽量不用，后期维护麻烦)

在元素上直接通过style属性编辑样式

通用属性：

id 给每个元素起标记

style 编辑样式

class 样式分类

<h1 style="color: aqua">我的标题</h1>

效果：

注意：

CSS三种引入方式中：后加载的会覆盖先加载的
方式一和方式二时后加载的覆盖先加载的
方式三会覆盖方式一和方式二的加载方式

三、CSS常用选择器

(一)标签选择器(通过html标签选择元素)

选取范围较大只要是页面中指定的标签都会选中

说明

根据标签名确定样式的作用范围

语法为元素名 {}

样式只能作用到同名标签上，其他标签不可用

相同的标签未必需要相同的样式，会造成样式的作用范围太大

<head>
  <style>
    h1 {
      color: lightseagreen;
    }

    p {
      color: green;
    }
  </style>
</head>
<body>
  <h1>静夜思--李白</h1>
  <p>床前明月光</p>
  <p>疑是地上霜</p>
  <p>举头望明月</p>
  <p>低头思故乡</p>
</body>

(二)class选择器(通过class值选元素)

选取范围精准，可以任意给元素指定class值，class值中有一个能匹配上即被选中。
class选择器配合class多值的特性，可以让选取元素非常灵活。

<head>
  <style>
    h1 {
      color: lightseagreen;
    }

    /* p {
      color: green;
    } */

    .myp {
      color: green;
    }
    .myp1 {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>静夜思--李白</h1>
  <p class="myp myp1">床前明月光</p>
  <p>疑是地上霜</p>
  <p class="myp">举头望明月</p>
  <p>低头思故乡</p>
</body>

(三)id选择器(通过id值选元素，在CSS中用的少)

选取范围精准，class可以替代id，id一般在写js时定义

<head>
  <style>
    h1 {
      color: lightseagreen;
    }

    /* p {
      color: green;
    } */

    .myp {
      color: green;
    }
    .myp1 {
      font-size: 30px;
    }
	
	#aimp {
        color: red;
    }
  </style>
</head>
<body>
  <h1>静夜思--李白</h1>
  <p class="myp myp1">床前明月光</p>
  <p>疑是地上霜</p>
  <p class="myp">举头望明月</p>
  <p id="aimp">低头思故乡</p>
</body>

基本选择器的优先级：id>class>标签权值高的覆盖权值低的

在浏览器页面上可以勾选调试CSS，但是要注意：

勾选调试最后确定的结果要重新复制到源码中，否则浏览器刷新不会生效！

四、常用组合选择器

1.并集选择器

同时选多种类型元素 选择器,选择器

<head>
  <style>
/*标签,标签*/
    h1,
    p {
      color: lightseagreen;
    }

/*标签,.class属性*/   
    h1,
    .myp {
       color: red;
    }
  </style>
</head>
<body>
  <h1>静夜思--李白</h1>
  <p class="myp">床前明月光</p>
  <p>疑是地上霜</p>
  <p class="myp">举头望明月</p>
  <p>低头思故乡</p>
</body>

2.交集选择器

同时满足多种条件的元素 选择器选择器 先元素再其他

<head>
  <style>
    /* 交集选择器 */
    .myp {
      color: red;
    }

    p.myp {
      color: blue;
    }
  </style>
</head>
<body>
  <h1 class="myp">静夜思--李白</h1>
  <p class="myp">床前明月光</p>
  <p>疑是地上霜</p>
  <p class="myp">举头望明月</p>
  <p>低头思故乡</p>
</body>

3.后代选择器

选取元素内部的元素 选择器选择器 选取范围较大

<head>
  <style>
    div p {
      color: blue;
    }

    .mydiv p {
      color: purple;
    }
  </style>
</head>
<body>
  <h1 class="myp">静夜思--李白</h1>
  <p>床前明月光</p>
  <div class="testdiv">
    <p>疑是地上霜</p>
    <div class="mydiv">
      <p>举头望明月</p>
      <p>低头思故乡</p>
    </div>
  </div>
</body>

4.子代选择器

选取元素内部的子元素 选择器>选择器 选取较精准

<head>
  <style>
    .testdiv > p {
      color: pink;
    }

    .testdiv > p > .mydiv > p {
      color: pink;
    }
  </style>
</head>
<body>
  <h1 class="myp">静夜思--李白</h1>
  <p>床前明月光</p>
  <div class="testdiv">
    <p>疑是地上霜</p>
    <div class="mydiv">
      <p>举头望明月</p>
      <p>低头思故乡</p>
    </div>
  </div>
</body>

5.属性选择器

[属性名] 或者 [属性名=属性值]

<head>
  <style>
    /*  
	[type] {
      color: red;
    }

    [type="button"] {
      color: indigo;
    } 
	*/

    .div1 [type="button"] {
      color: indigo;
    }
	
    .div2 [type="button"] {
      color: red;
    }
  </style>
</head>
<body>
  <div class="div1">
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
  </div>
  <div class="div2">
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
  </div>
</body>

6.通用选择器

* 做全局默认设置

<head>
  <style>
	* {
      color: darksalmon;
    }
  </style>
</head>
<body>
  <h1 class="myp">静夜思--李白</h1>
  <p>床前明月光</p>
  <div class="testdiv">
    <p>疑是地上霜</p>
    <div class="mydiv">
      <p>举头望明月</p>
      <p>低头思故乡</p>
    </div>
  </div>

  <div class="div1">
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
  </div>
  <div class="div2">
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
    <input type="text" value="输入框" /><input type="button" value="按钮" />
  </div>
</body>

五、CSS常用样式

(一)文字、背景常用设置

常用样式属性
1 color 文字颜色颜色英文
rgb值红绿蓝 0-255
#RGB 16进制
#3CF 相当于 #33CCFF

2 font-size 文字大小单位像素绝对单位
em rem 相对单位默认字体倍率
分辨率 1080p 1920*1080
2k
4k

3 font-weight 字体粗细数大的粗

4 font-family 字体类型默认黑体

5 text-align: center; 调整文字左右位置

6 line-height: 100px; 行高行高与块高一致文字正好在中心点

7.background-image: url(./imgs/niu.jpg); 背景图片
jpg png gif

8.background-size: 50%; 调整大小比例

9.background-repeat: no-repeat; 背景重复方式

10. background-color: blueviolet; 背景颜色背景图片与颜色一起使用时图片会盖在颜色上边

11. list-style:url(./imgs/niu2.png); 列表的标记可以使用图片

12. border: 1px solid black; 统一设置
四条边分开设置
left right top bottom

13. border-radius 像素百分比
四个角可以单独设置
border-bottom-left-radius: 30%;

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .div1 {
      color: rgb(196, 185, 42);
      font-size: 30px;
      font-weight: 400;
      font-family: "黑体";

      text-decoration: none;
      text-align: center;
      width: 200px;
      height: 200px;
      border: 1px solid black;

      line-height: 170px;
      background-image: url(./imgs/photo.jpg); 
      /*图片一般不调试大小，由UI设计师绘制*/
      background-size: 50%;
      background-repeat: no-repeat;
      background-color: aquamarine;

      border-bottom: 5px solid blue;
      border-left: 6px solid red;

      border-radius: 20px; 
      /*也可以使用% 百分比最多到50% 正方形是圆圈，长方形是椭圆*/

      border-bottom-left-radius: 30%;

          border-top-right-radius: 30%;
    }

    a {
      text-decoration: none;
    }

    .myul {
      list-style: url(./imgs/flower.jpg);
    }

    ul.myul2 {
      padding-left: 10px; /* 移除<ul>元素的左内边距 */
    }

    ul.myul2 li {
      list-style-type: none;
      background-image: url("./imgs/搞笑小人.gif");
      background-repeat: no-repeat;
      background-position: left; /* 根据需要调整位置 */
      padding-left: 25px; /* 根据需要调整padding，为背景图像留出空间 */
      background-size: 16px 16px; /* 调整背景图像的大小 */
    }
  </style>
</head>
<body>
  <div class="div1">测试</div>
  <a href="###">测试超链接</a>
  <ul class="myul">
    <li>以正确相处之道推动中美关系行稳致远</li>
    <li>在家叫“胖妞” 出去记得叫鲲鹏热</li>
    <li>尔滨装卸行李温柔得像放鸡蛋</li>
    <li>郑钦文称不与选手交朋友 李娜回应</li>
  </ul>

  <div>
    <ul class="myul2">
      <li>中国政府就黄岩岛领海基线发表声明</li>
      <li>吃播版进博会来了</li>
      <li>湖南2岁走失女童被警犬在山上找到</li>
      <li>上海老太一个月偷超市10次猪肉被拘</li>
    </ul>
  </div>
</body>

(二)盒子模型

页面元素在排布时使用的逻辑概念盒子互相嵌套和排布

content 内容大小可以自动适应
也可以设置宽高：width height
border 边框特殊显示效果
padding 内部填充边框到内容之间填充 (元素整体会变大)
margin 外边距元素之间的间隔距离

margin: 100px auto; 元素居中特殊用法

<head>
  <style>
    .mydiv{
        width: 100px;
        height: 100px;
        border: 10px solid black;
        /* padding: 50px; 内部填充  内容与边框的间隔 */
        /*   padding: 50px 40px 30px 20px; */
        /* padding-left: 50px; */
        /* 四个方向可以单独设置 */
        /* margin:10px */
        /* 外边距 控制元素与元素的间隔 */
        /* margin-left: 50px;
        margin-top: 50px; */

        margin: 0px auto;
    }
    h1{
        margin-top: 50px;
    }
  </style>
</head>
<body>
    <div class="mydiv">
        测试div<br>
        12332111
    </div>
    <div class="mydiv">
        测试div<br>
        12332111
    </div>
    <h1>11111</h1>
</body>

(三)div+css布局

div+css布局实际上就是在页面中画格子大格子中套小格子

页面元素排布时像画table一样
行加单元格的思想来布局
div+css 宽高排版时为了方便适配通常使用相对单位
百分比高度使用百分比时要求父元素的高度已指定

视窗比例相对单位：
宽度 vw 100vw 视窗宽度100%
高度 vh 100vh 视窗高度100%

<head>
  <style>
    /* html,body{
          margin: 0px;
          height: 100%;
      } */
    body {
      margin: 0px;
    }
    .mainPanel {
      width: 100vw;
      height: 100vh;
      background-color: lightgrey;
    }
    .top {
      width: 100%;
      height: 15%;
      background-color: rgb(255, 179, 179);
    }
    .middle {
      width: 100%;
      height: 70%;
      background-color: rgb(156, 234, 248);
    }
    .bottom {
      width: 100%;
      height: 15%;
      background-color: rgb(222, 238, 180);
    }

    .left {
      width: 20%;
      height: 100%;
      background-color: rgb(255, 119, 187);
      float: left;
    }
    .right {
      width: 80%;
      height: 100%;
      background-color: rgb(134, 69, 255);
      float: left;
    }
  </style>
</head>
<body>
  <div class="mainPanel">
    <div class="top"></div>
    <div class="middle">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </div>
</body>

(四)显示方式属性

display 元素显示方式
block 块方式显示
inline 行内方式显示
inline-block 行内快方式显示
none 不显示

显示规则：

块 (block) 从上到下排列宽高有效

行内(inline) 从左到右排列宽高无效

行内块() 从左到右排列宽高有效图片表单元素(输入框选择框按钮.....)

透明度：

opacity: 0; 透明度 0透明-1不透中间半透

rgba(41, 211, 168, 0.151) 也可以设置透明度

(五)伪类选择器 (选取元素的交互状态)

:active 鼠标点击
:hover 鼠标悬停 (鼠标放在了某个元素上)
cursor: pointer; 手型光标

<head>
    <style> 
        .testDiv{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .testDiv:active{
            background-color: red;
        }

        .testDiv:hover{
            border: 10px solid rgb(114, 105, 105);
            cursor: pointer;
        }
        a:hover{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="testDiv"></div>
    <a href="###">aaaa</a>
</body>

(六)定位属性

定位属性 position

默认文档流块从上到下行内元素从左到右

relative 相对定位元素不脱离文档流元素以原始位置偏移

absolute 绝对定位元素脱离文档流以页面位置进行偏移

fixed 固定定位元素脱离文档流以页面位置进行偏移并固定在此处

static 默认文档流

top 向下偏移可以取负值反方向

left 向右偏移

z-index 图层顺序必须用在有定位改变的元素上 static时无效

悬浮窗居中

  <head>
    <style>
      .div1 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: lightcoral;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1;
      }      
      .div2 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: lightgoldenrodyellow;
        /* margin-top: 50px; */
        position: fixed;
        top: 30px;
        left: 30px;
        /* left: -30px; */ /*可以写-值，往反方向偏移*/
        /* right: 30px; */
        z-index: 2;
      }

       /* 悬浮窗居中 */
      .div3 {
        width: 300px;
        height: 100px;
        border: 1px solid black;
        background-color: lightskyblue;
        position: fixed;
        top: 50px;
        left: 50%; 
        margin-left: -150px; /*宽度的一半，居中显示*/
        z-index: 3;
      }
    </style>
  </head>
  <body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </body>