CSS学习笔记

最新推荐文章于 2024-09-10 18:37:52 发布
最新推荐文章于 2024-09-10 18:37:52 发布
阅读量263 收藏 1
点赞数 1
文章标签： css 学习 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FFZH00/article/details/129460662
版权

CSS又叫层叠样式表，用于网页样式的修饰。

CSS语法

  • 每个CSS语法包括选择符和声明。

  • 声明：{属性:属性值;属性:属性值;}。（每条声明以分号结束）

  • 当一个属性有多个属性值时，属性值间不分前后顺序，用空格隔开，{属性:属性值1 属性值2;}

  • 书写样式过程中，空、换行等操作不影响属性显示。

  1. CSS插入样式

CSS代码插入样式分为三种：内部样式、外部样式、行内样式。

  1. 内部样式

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        h1{
            color:red;
        }
        h2{
            color: yellow;
        }
    </style>
    <h1>1</h1>
    <h2>2</h2>
    <h1>3</h1>
</body>
</html>

在浏览器中显示如下：

  1. 外部样式

CSS外部引入方式：

  1. 在HTML的<head> </head>中加入<link rel="stylesheet" type="text/css" href="css文件路径"/>;

  1. 在HTML的<head> </head>中加入

<style type="text/css">

@import url("css文件的路径");

</style>

例如：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h1>3</h1>
</body>
</html>

css中代码：

h1{
    color:red;
}
h2{
    color: yellow;
}

在浏览器显示如下：

  1. 行内样式

style作为属性直接写在标签后边。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 style="color: red;">1</h1>
    <h2 style="color: yellow;">2</h2>
    <h1 style="color: red;">3</h1>
</body>
</html>

在浏览器显示如下：

注意：优先级：行内>内部>外部,但如果加了!important，则优先级最高。

  1. 选择器

用来对html页面元素实现一对一、一对多或多对一的控制。

  1. 元素选择器

语法：元素名称{属性:属性值;}如:div、p、h1、img等。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1{
            color:aqua;
        }
        h2{
            color:blue;
        }
        div{
            color:red;
        }
    </style>
</head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <div>3</div>
</body>
</html>

在浏览器显示如下：

  1. 类选择器

.class名{属性:属性值;}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a{
            color:red;
        }
        .b{
            color:green;
        }
        .c{
            color:blue;
        }
        .d{
            background-color: black;
        }
    </style>
    
</head>
<body>
    <h1 class="a">1111</h1>
    <h1 class="b d">222</h1>
    <h2 class="c">22</h2>
    <div class="b">333</div>
</body>
</html>

在浏览器显示如下：

当该元素有不同类选择器，恰好不同选择器对同一属性有不同属性值，则采用就近原则，即在<style> </style>中离该元素最近的优先。

  1. id选择器

#id名{属性:属性值;}

不能一个标签几个id，应该唯一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #a{
            color:red;
        }
        #b{
            color:green;
        }
        #c{
            color:blue;
        }
    </style>
    
</head>
<body>
    <div id="a">1111</div>
    <div id="b">222</div>
    <div id="c">333</div>
</body>
</html>

在浏览器显示如下：

  1. 通配符选择器

*{属性:属性值;}

对所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;/*外边距*/
            padding:0;/*内边距*/
        }
    </style>
    
</head>
<body>
    <div>1111</div>
    <h1>222</h1>
    <ul>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
</body>
</html>

在浏览器显示如下：

  1. 群组选择器

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div,.a,h1,ul{
            background-color: aqua;
        }
    </style>  
</head>
<body>
    <div>1111</div>
    <p class="a">2222</p>
    <h1>222</h1>
    <ul>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
</body>
</html>

在浏览器显示如下：

  1. 包含/后代选择器

为从右到左选择，先找到被包含的，再找包含的，

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div p{
            background-color: aqua;
        }
        p b{
            background-color: brown;
        }
    </style>  
</head>
<body>
    <div>1111</div>
    <div>
        <p>2222</p>
    </div>
    <p>
        <b>33</b>
    </p>
    <div>
        <b>44</b>
    </div>
</body>
</html>

在浏览器显示如下：

  1. 伪类选择器

a:link{属性:属性值;}超链接初始状态；

a:visited{属性:属性值;}超链接被访问后的状态；

a:hover{属性:属性值;}鼠标悬停超链接的状态；

a:active{属性:属性值;}鼠标点下超链接的状态。

注意：

  • 顺序为：link-visited-hover-active

  • 可把相同声明提出来放在a选择符中。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a:link{
            color:yellow;
        }
        a:visited{
            color:red;
        }
        a:hover{
            color:green;
        }
        a:active{
            color:orange;
        }
    </style>
    
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

在浏览器显示如下：

在进行其他操作后，颜色也随之改变。

注意：优先级：!important>内联>id>class>元素

包含选择器为选择符权重和。

相同权重，就近，哪个选择符最后定义，采用哪个。

  1. 文本属性

font-size：字体大小；

font-family：字体；

color：颜色；blue/#0000ff/rgb(0,0,255)

font-weight：加粗。lighter更细的、bolder更粗的、bold加粗、normal常规/100-500不加粗、600-900加粗；

font-style:倾斜。italic斜体字、oblique倾斜的文字、normal常规；

text-align：文字水平对齐。left、center、right、justify水平2端对齐，只对多行起作用。

line-height：行间距。与height一样时，可实现垂直居中（多行文本不可，可适当调整）。

letter-spacing：字符间距；

word-spacing：词间距；

text-indent:首行缩进（2em当前字体两倍）;

text-decoration：文本修饰（none没有/underline下划线/overline上划线/line-through删除线；

font:font-style、font-weight、font-size、line-height、font-family简写（顺序不能变，且当font-size和font-family同时存在时才起作用；

text-transform:大小写。capitalize首字母大写/lowercase小写/uppercase大写/none；

<!DOCTYPE html>
<html lang="en">
<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>
        .p1{
            font-size: 20px;
            color:#0000ff;
        }
        .p2{
            font-family: 草书,宋体;
            font-weight: bolder;
            font-style: italic;
        }
        .box1{
            text-align: justify;
            width: 500px;
            background-color: yellow;
        }
        .box2{
            width: 500px;
            height: 100px;
            background-color: yellow;
            line-height: 100px;
            /* 多行文本不能和weight一样 */
            text-align: center;
        }
        .p3{
            letter-spacing: 10px;
        }
        .p4{
            word-spacing: 10px;
        }
        .p{
            /* text-indent: 32px; */
            text-indent: 2em;
        }
        .p5{
            text-decoration: underline;
            /* text-transform: capitalize; */
            text-transform: lowercase;
        }
        .p6{
            font:italic bold 20px/1em 楷体
        }
    </style>
</head>
<body>
    <p class="p6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium cum labore eaque nulla et adipisci sapiente iure aperiam reprehenderit ratione hic quaerat, ducimus eligendi facere, tempore velit veniam consequatur vel.</p>
    <p class="p5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat porro explicabo sint minima dolores similique quos ad voluptatem, necessitatibus ut, suscipit fuga labore adipisci laborum maiores doloribus accusantium nulla mollitia.</p>
    <p class="p3 p">梵蒂冈地方官能更好的急急急急急急急急急发电公司他仍然仍然和固定用法和今后固定用户可返还给福晋感觉你本科成绩gold发开发就给你卢浮宫东京开封府合肥京东方和</p>
    <div class="box1">cdgfdgdfg</div>
    <div class="box2">csadfgrtjrtyrewdfghjuytgnkjuytrewasxcvbhuytresdfghjuytrdcvg</div>
    <p class="p1 p4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias voluptates, eum enim tempora odit veniam voluptatum libero quo culpa reprehenderit voluptate magni maiores quis eaque nihil ex quod harum et!</p>
    <p class="p2 box1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias voluptates, eum enim tempora odit veniam voluptatum libero quo culpa reprehenderit voluptate magni maiores quis eaque nihil ex quod harum et!</p>
</body>
</html>

在浏览器显示如下：

  1. 列表属性

list-style-type：列表符号样式；disc实心圆/circle空心圆/square实心方块/none去掉符号；

list-style-image:图片设置为列表符号；url()；

list-style-position:设置列表项标记位置；outside列表外面（默认）/inside列表里面；

list-style:简写；none去除列表符号；

<!DOCTYPE html>
<html lang="en">
<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>
        ul{
            list-style-type: disc;
            /* circle square none */
            /* list-style-image: url(); */
            /* url()里写图片路径 */
        }
        li{
            border: 1px solid red;
            list-style-position: inside;
        }
        .box{
            list-style: none url(1.jpg) inside;
        }
    </style>
</head>
<body>
   <ul>
    <li>11111</li>
    <li>22222</li>
    <li class="box">33333</li>
   </ul> 
</body>
</html>

在浏览器显示如下：

  1. 背景属性

background-color：背景颜色;

backgrounf-image：背景图片;

background-repeat：背景图片的平铺；no-repeat/repeat/repeat-x/repeat-y；

background-position：背景图片的定位；水平、垂直；

background-attachment:背景图片的固定；scroll滚动/fixed固定；

background-size:背景图片大小；

可简写成background，background-size不行。

<!DOCTYPE html>
<html lang="en">
<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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(255,0,0);
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,0.5);/*a代表透明度*/
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: yellow;
            background-image: url(../1/img/1.jpg);
            background-repeat: repeat-x;
            /* background-repeat: repeat-x; */
            /* background-position: 20px 20px; */
            /*
            1.px px
            2.% %
            3.left center right
            top center bottom
            */
        }
        .box4{
            width: 200px;
            height: 300px;
            background: yellow url(../1/img/1.jpg) no-repeat bottom right scroll;
            background-size: 100px 100px;
            /*
            1.px px
            2.% %
            3.cover（可能会裁图）
            4.contain（可能会留白）
            */
        }
    </style>
</head>
<body>
    <div class="box1">
        大家好
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

在浏览器显示如下：

  1. 浮动属性

  1. 浮动

用来定义网页中其它文本如何环绕该元素显示以及让竖着的东西横着来。

float：left元素靠左边浮动/right元素靠右边浮动/none元素不浮动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .a{
            background:aqua;
            float:left;
        }
        .b{
            width: 400px;
            height: 400px;
            background:blue;
            float: left;
        }
        .c{
            background:red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b">大家好</div>
    <div class="c"></div>
</body>
</html>

在浏览器显示如下：

  1. 清浮动

clear：none允许有浮动/right不允许右边有浮动/left不允许左边有浮动/both不允许有浮动;

应对高度塌陷：

  • 高度写死；

  • 清浮动，被遮挡的不允许有对应浮动；

  • 当前浮动元素后补一个盒子，不设宽高，clear:both；

  • overflow:hidden。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a,.b{
            width: 200px;
            height: 200px;
            float: left;
        }
        .a{
            background:aqua;
        }
        .b{
            background:blue;
        }
        .c{
            width: 300px;
            height: 300px;
            background:red;
           /* clear: left;2.不允许有左浮动*/
        }
        .container{
            /*1.写死高度height: 200px;*/
            overflow: hidden;/*4.*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="a"></div>
        <div class="b"></div>
        <!-- <div style="clear:both"></div>3.当前浮动元素后clear:both -->
    </div>
    <div class="c"></div>
</body>
</html>

在浏览器显示如下：

  1. 盒子模型

padding：内边距；1个值代表四个方向一样；2个值代表上下、左右；3个值代表上、左右、下；4个值代表上右左下；

padding-top、padding-bottom、padding-left、padding-right：四个内边距；

border:边框；**px；solid实线/double双实线/dashed线段线/dotted点状线；color；

border-top、border-bottom、border-left、border-right：四个内边距；

border-width：边框宽度；

border-style：边框样式；

border-color：边框颜色；

margin:外边距；margin-top、margin-bottom、margin-left、margin-right；（背景色没有蔓延，可设负值）；

margin:0 auto盒子水平居中；

特性问题：

  • 兄弟关系，两个盒子垂直外边距不取两个相邻外边距的和，反而取最大值；水平外间距取和。

  • 父子关系，给子盒子加外边距，但作用于父身上：

  1. 给父盒子加内边距，但要注意父盒子高度减去内边距；

  1. 给父盒子设置透明边框，但注意高度和宽度要减去2倍边框；

  1. 给子盒子或父盒子浮动；

  1. 给父盒子加overflow: hidden。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a{
            width:500px;
            height: 100px;
            background: yellow;
            text-align: justify;
            padding: 10px 20px 30px 40px;
        }
        .b{
            width:300px;
            height: 200px;
            background: blue;
            text-align: justify;
            padding-left: 10px;
        }
        .c{
            width: 100px;
            height: 100px;
            background: red;
            border: 10px solid green;
        }
        .d{
            width: 50px;
            height: 50px;
            background: gray;
            border-top: 5px solid aqua;
            border-left: 10 dotted yellow;
            margin-right: 10px;
            float: left;
        }
        .d1{
            width: 50px;
            height: 50px;
            background: rebeccapurple;
            border-top: 5px solid teal;
            border-left: 10 dotted yellow;
            margin-left: 10px;
            float: left;
        }
        .e{
            width: 50px;
            height: 50px;
            background: blue;
            border-width: 5px 10px;
            border-color: yellow green blue;
            border-style: double;
            clear: left;
            margin: 0 auto;
        }
        .f{
            width: 100px;
            height: 100px;
            /* height: 90px; */
            background: yellowgreen;
            /*padding-top=10px 1.给父盒子加内边距，但要注意父盒子高度减去内边距*/
            /* border: 1px solid transparent;2. 给父盒子设置透明边框，但注意高度和宽度要减去2倍边框 */
            /* float: left; 3.给子盒子或父盒子浮动*/
            overflow: hidden;/*4.给父盒子加overflow: hidden;*/
        }
        .g{
            width: 50px;
            height: 50px;
            background: red;
            margin-top: 10px;
            /* float: left; 3.给子盒子或父盒子浮动*/
        }
    </style>
</head>
<body>
    <div class="a">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem magni dolorem nam sit, eveniet eligendi debitis facilis dicta nemo architecto? At corrupti accusantium possimus officia rerum debitis hic dolorum illo?
    </div>
    <div class="b">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste beatae error veritatis excepturi eius. Eaque, sit minima laboriosam earum tempore temporibus nemo numquam voluptatem sapiente! Inventore magni ut aperiam porro?</div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="d1"></div>
    <div class="e"></div>
    <div class="f">
        <div class="g"></div>
    </div>
</body>
</html>

在浏览器显示如下：

  1. 溢出属性

overflow:visible（默认，溢出内容显示元素外）/hidden（溢出内容隐藏）/scroll（溢出内容以滚动方式显示）/auto（有溢出加滚动条，无溢出正常显示）/inherit（遵从父元素继承overflow的值）

overflow-x：x轴溢出；

overflow-y：y轴溢出；

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            /*overflow:visible 显示溢出*/
            /*overflow:hidden 溢出隐藏，文本裁切*/
            /* overflow: scroll; 滚动条*/
            /* overflow: auto; */
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, nemo modi? Accusamus consequatur, distinctio culpa quidem laborum obcaecati architecto tenetur tempore voluptates praesentium laboriosam blanditiis quam minima magnam vel aliquam!
    </div>
</body>
</html>

在浏览器显示如下：

  • 空余空间

white-space：normal（默认，空白被浏览器忽略）/nowrap（文本不换行，在同一行上继续，直到遇到<br>/pre（显示空格、回车，不换行）/pre-wrap（显示空格、回车，换行）/pre-line（显示回车，不显示空格、换行）/inherit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .a{
            background: yellow;
            white-space: nowrap;
        }
        .b{
            background: red;
            white-space: pre-line;
        }
        .c{
            background: blue;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="a">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, nemo modi? Accusamus consequatur, distinctio culpa quidem laborum obcaecati architecto tenetur tempore voluptates praesentium laboriosam blanditiis quam minima magnam vel aliquam!
    </div>
    <div class="b">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, dolore. Sed adipisci, molestias earum, expedita sit natus perspiciatis neque eos optio excepturi vel nisi itaque, cumque velit reiciendis mollitia assumenda.
    </div>
    <div class="c">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia vitae dolorem, voluptatum saepe, nostrum quam minus eaque maxime, dolore totam reprehenderit eos eum consequatur soluta? Ullam fugiat nihil magni doloremque.
    </div>
</body>
</html>

在浏览器显示如下：

  • 溢出省略号

  1. 必须要有容器宽度

  1. 强制文本在一行内显示，white-space:no-wrap;

  1. 溢出内容为隐藏，overflow:hidden;

  1. 溢出文本显示省略号，text-overflow:ellipsis;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, nemo modi? Accusamus consequatur, distinctio culpa quidem laborum obcaecati architecto tenetur tempore voluptates praesentium laboriosam blanditiis quam minima magnam vel aliquam!
    </div>
</body>
</html>

在浏览器显示如下：

  1. 元素显示类型

  1. 块元素

  1. 显示为矩形区域；

  1. 默认占一行，自上而下排列；

  1. 可定义宽度和高度；

  1. 一般作为其他元素容器。

如：div、p、ul、ol、li、dl、dd、dt、h1-h6等。

有display:block/list-item;。

  1. 行内元素

  1. 横着排；

  1. 没有形状，不能定义宽和高；

  1. 遵循盒模型基本规则，但对margin、padding无效，只能左右，不能上下。

如：a、b、em、i、span、strong。

有display:inline;。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* div{
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 1px solid red;
        } */
        span{
            background: yellow;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>

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

在浏览器显示如下：

  1. 行内块元素

同时具备块元素及行内元素特点。

如：img、input等。

有display:inline-block;。

支持上下左右边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <img src="../1/img/1.jpg">
    <div>111111111</div>
</body>
</html>

在浏览器显示如下：

  1. 元素类型强制转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            display: block;
        }
        div{
            width: 100px;
            height: 100px;
            background: yellow;
            display: inline;
        }
    </style>
</head>
<body>
    <img src="../1/img/1.jpg">
    <div>111111111</div>
</body>
</html>

在浏览器显示如下：

可见，div成了行内元素。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .home{
            background-color: red;
        }       
        a{
            background-color: black;
            color:white;
            padding:10px;
            display: inline-block;
        }

        a:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="" class="home">首页</a>
    <a href="">国内</a>
    <a href="">国际</a>
    <a href="">军事</a>
    <a href="">财经</a>
    <div>11111111111111111</div>
</body>
</html>

在浏览器显示如下：

可见几个链接成了行内块元素。

  1. display

display:none 不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .hide{
            display:none;
        }
        .box:hover ul{
            background: yellow;
            display: block;
        }
    </style>
</head>
<body>
    <div class="hide">111111</div>
    <div class="box">
        军事
        <ul class="hide">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</body>
</html>

在浏览器显示如下：

只有当鼠标移到上面才会显示黄色背景的列表。

  1. 表单属性

  1. 文本域

textarea:

通过width、height给定宽高，通过resize重新设置大小，当resize值为vertical表示只可以垂直方向改变表单大小，horizontal则水平改大小，both都可以改变，none都不可以改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        textarea{
            width: 100px;
            height: 100px;
        }
        .a{
            resize: both;
        }
        .b{
            resize: none;
        }
    </style>
</head>
<body>
    <div>
        <textarea cols="10" rows="10" placeholder="请输入你的意见" class="a"></textarea> 
    </div>
    <div>
        <textarea cols="10" rows="10" placeholder="请输入你的意见" class="b">意见是：</textarea> 
    </div>
</body>
</html>

  1. 字段集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        fieldset{
            border: 1px solid blue;
            width: 400px;
            height: 100px;
        }
        legend{
            border: 1px solid red;
            text-align: center;
            padding:10px;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="a">男
        <br>
        <input type="radio" name="a">女
    </fieldset>
    <fieldset>
        <legend>爱好</legend>
        <input type="checkbox" name="b">抽烟
        <br>
        <input type="checkbox" name="b">喝酒
    </fieldset>
</body>
</html>

  1. 定位属性

  1. 静态定位和相对定位

position:static;（默认）即按照文档流顺序，从左到右从上到下占满页面

position:relative;相对定位，不脱离文档流，参照自己初始位置

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: red;
            position: static;
            top: 100px;
        }
        .box2{
            background: blue;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box3{
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

在浏览器显示如下：

可见，第一个位置采用默认值后，top不奏效，第二个采用相对定位后，会根据原来所在位置移动。

  1. 绝对定位

position:absolute;绝对定位，脱离文档流

  1. 当没有父元素或父元素没有定位，参照物为浏览器窗口第一屏；

  1. 有父元素且父元素有定位，参照父元素。

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .b1{
            width: 500px;
            height: 500px;
            background: yellow;
            margin: 0 auto;
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background: red;
            left: 100px;
            top: 100px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur recusandae fugiat non nesciunt. Doloribus illum temporibus illo? Nesciunt quidem quasi doloribus. Vitae id, sapiente consectetur quisquam soluta veritatis eligendi consequuntur!Lorem</div>
    <div class="box"></div>
    <div class="b1">
        <div class="child"></div>
    </div>
</body>
</html>

在浏览器显示如下：

第一个盒子为没有父元素，故相对于浏览器移动；第二个盒子有父元素且父元素有定位，故相对于父元素移动。

  1. 固定定位

position:fixed;固定定位，脱离文档流，参照浏览器当前窗口

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 1500px;
            background: yellow;
        }
        .ad{
            width: 100px;
            height: 200px;
            background: red;
            position: fixed;
            right: 0;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <div class="ad">

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

在浏览器显示如下：

可见，无论如何滚动，小盒子都固定在右下角。

  1. 粘性定位

position:sticky;粘性定位，可以做吸顶效果，CSS3.0内容

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            background: yellow;
            width: 100%;
            height: 100px;
        }
        .nav{
            background: red;
            width: 500px;
            height: 50px;
            margin: 0 auto;
            position:sticky;
            top:0px;
        }
        .body{
            height: 1000px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav"></div>
    <div class="body"></div>
</body>
</html>

在浏览器显示如下：

可见，形成吸顶效果。

  1. 定位的层级

z-index值越大，层级越高，显示在上面

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: yellow;
            position: relative;
            top: 100px;
            left: 100px;
            z-index: 100;
        }
        .box2{
            background: red;
            position: relative;
            z-index: 200;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在浏览器显示如下：

  1. 绝对定位的层级及延伸

  1. 父子关系的层级

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: yellow;
            position: relative;           
        }
        .child{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

在浏览器显示如下：

如图所示，父盒子显示在子盒子上。

  1. 兄弟关系的层级

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: yellow;
            position: absolute; 
            top: 50px;
            left: 50px; 
            z-index: 100;         
        }
        .box2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 200;
        }
    </style>
</head>
<body>
    <div class="box1">
        
    </div>
    <div class="box2"></div>
</body>
</html>

在浏览器显示如下：

同样，z-index值越大，层级越高，显示在上面。

  1. 行内元素转变为块元素

将行内元素通过绝对定位转变为块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <span></span>
</body>
</html>

浏览器显示如下：

  1. 定位控制元素水平垂直居中

  • 屏幕水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div>

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

在浏览器显示如下：

  • 子盒子在父盒子中水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background: yellow;
            margin: 0 auto;
            position: relative;
        }
        .child{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器显示如下：

  1. 浮动与定位区别

float:半脱离文档流，会形成文字环绕效果

绝对定位：全脱离文档流，不会出现文字环绕

  • 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .box2{
            width: 300px;
            height: 300px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde sunt obcaecati corrupti, repellat, sequi ipsa consectetur rem aut deserunt harum vitae odit laborum. Optio expedita libero placeat possimus non id?</div>
</body>
</html>

浏览器显示如下：

  • 绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
        .box2{
            width: 300px;
            height: 300px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde sunt obcaecati corrupti, repellat, sequi ipsa consectetur rem aut deserunt harum vitae odit laborum. Optio expedita libero placeat possimus non id?</div>
</body>
</html>

浏览器显示如下：

  1. 锚点

可以实现页内跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            position: fixed;
            right: 0px;
            top: 100px;
        }
        li{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
            
        }
        div{
            height: 600px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#a">京东秒杀</a>
        </li>
        <li>
            <a href="#b">双11</a>
        </li>
        <li><a href="#c">频道优选</a></li>
        <li><a href="#d">特色广场</a></li>
    </ul>
    <div id="a">京东秒杀</div>
    <div id="b">双11</div>
    <div id="c">频道优选</div>
    <div id="d">特色广场</div>
</body>
</html>

浏览器显示如下：

  1. 精灵图

图片整合技术

将导航背景图片，按钮背景图片等有规则的合并成一张图片，用background-position实现图片定位。

图片整合优势：

  1. 减少对服务器请求次数，提高页面加载速度；

  1. 减小图片体积。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 103px;
            height: 32px;
            float: left;
            margin: 10px;
            background: yellow url(./1.png);
        }
        .box1{
            background-position: -205px -111px;
        }
        .box2{
            background-position: -205px -74px;
        }
        .box3{
            background-position: -205px -37px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

浏览器显示如下：

  1. 宽高自适应

即元素大小可根据窗口或子元素自动调整。

  1. 宽度自适应

宽度默认值为auto；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: auto;
            height: 100px;
            padding-left: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器显示如下：

可见，即使有padding，宽度会自适应。

  1. 高度自适应

高度默认值为height:auto。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header,.footer{
            width: 100%;
            height: 50px;
            background: yellow;
        }
        .body{
            height: auto;
            background: red;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="body">
        <ul>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
        </ul>
    </div>
    <div class="footer"></div>
</body>
</html>

浏览器显示如下：

  1. 最小高度/最小宽度

设置min-height/min-width，即使内容很少，盒子高度和宽度也会是最小高度值和最小宽度值。

  1. 最大高度/最大宽度

设置max-height/max-width，即使内容很多，盒子高度和宽度也只能是设定的最大值。

  1. 浮动元素父元素高度自适应

解决高度塌陷的几种方法及问题：

  1. 给父元素添加高度

只适用于固定页面布局，不能自适应；

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .left,.right{
            width: 100px;
            height: 100px;
            float: left;
        }
        .left{
            background: yellow;
        }
        .right{
            background: red;
        }
        .content{
            width: 200px;
            height: 200px;
            background: green;
        }
       .box{
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="content"></div>
</body>
</html>

浏览器显示如下：

如图所示：当盒子过多出现换行时出现覆盖。

  1. 在高度塌陷父元素后添加<div style="clear:both;"></div>

会添加多余结构，不利于可读性。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .left,.right{
            width: 100px;
            height: 100px;
            float: left;
        }
        .left{
            background: yellow;
        }
        .right{
            background: red;
        }
        .content{
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div style="clear:both;"></div>
    </div>
    <div class="content"></div>
</body>
</html>
  1. 给塌陷的元素添加overflow：hidden;

会隐藏定位在元素外面的元素。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .left,.right{
            width: 100px;
            height: 100px;
            float: left;
        }
        .left{
            background: yellow;
        }
        .right{
            background: red;
        }
        .content{
            width: 200px;
            height: 200px;
            background: green;
        }
        .box{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos inventore nesciunt nam pariatur nobis exercitationem at. Aliquam asperiores voluptatem libero atque itaque eos, assumenda officiis facilis iure necessitatibus hic tempore.</div>
    </div>
    <div class="content"></div>
</body>
</html>

浏览器显示如下：

如图所示：溢出的文字被隐藏。

  1. 万能清除浮动法

父元素:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

<!DOCTYPE html>
<html lang="en">
<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>
        *{
            margin:0;
            padding: 0;
        }
        .a{
            width: 300px;
            margin: 0 auto;
        }
        ul{
            list-style: none;
        }
        .a .b{
            float:left;
            width: 148px;
            text-align: center;
            border: 1px solid blue;
            background: blue;
            color:white;
            line-height: 40px;
            position: relative;
        }
        .b:hover{
            background: lightblue;
        }
        .b ul{
            display:none;
            background: white;
            color: black;
            position: absolute;
            top: 40px;
            left: 0;
            width: 148px;
        }
        .b:hover ul{
            display: block;
        }
        .b>li li:hover{
            background: lightblue;
            
        }
        .content{
            height: 100px;
            background:yellow;
        }
        .a::after{
            content: "";
            clear: both;
            display: block;
            width: 0;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <ul class="a">
        <li class="b">视频教程
            <ul>
                <li>全部视频教程</li>
                <li>HTML</li>
                <li>JAVA</li>
            </ul>
        </li>
        <li class="b">认证考试
            <ul>
                <li>pmp</li>
                <li>红帽</li>
            </ul>
        </li>
    </ul>
    <div class="content">11111111</div>
</body>
</html>

如图所示，在打开二级菜单后会对下边的进行覆盖。

伪元素

  1. ::after（与content属性一起用，定义在对象后的内容。）

  1. ::before：与content属性一起用，定义在对象前的内容。

  1. ::first-letter：定义对象内第一个字符的样式。

  1. ::first-line：定义对象内第一行文本的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div::first-letter{
            font-size: 30px;
            color: red;
        }
        div::first-line{
            background: yellow;
        }
        div::before{
            content: "aaa";
        }
        div::after{
            content: "bbb";
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa dicta laboriosam non? Voluptates sint, tempore sit eius necessitatibus, dolorum sunt earum modi praesentium corrupti quidem totam quo deserunt facilis impedit!</div>
</body>
</html>

占位隐藏

visibility:hidden;为占位隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background: yellow;
            /*display: none;不占位隐藏*/
            visibility: hidden;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

  1. 窗口自适应

盒子根据窗口大小改变

html,body{height:100%;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100%;
            background: yellow;
        }
        html,body{
            height: 100%;
        }
        .child1{
            background: blue;
            height: 50%;
        }
        .child2{
            background: red;
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
</html>

  1. 两栏布局

  1. 第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box1{
            width: 200px;
            height: 100%;
            background: red;
            float: left;
        }
        .box2{
            height: 100%;
            background: yellow;
            margin-left: 200px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

  1. 第二种方法

calc()函数：用于动态计算长度值

运算符前后需要保留一个空格，如：width: calc(100% - 200px);

支持"+""-""*""/"

使用标准数学运算优先级规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .box1{
            width:200px;
            height: 100%;
            background: red;
            float: left;
        }
        .box2{
            width:calc(100% - 200px);
            height: 100%;
            background: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

右边实现了自适应

  1. 三栏布局

  1. 第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .left,.right{
            width: 200px;
            height: 100%;
        }
        .left{
            background: yellow;
            float: left;
        }
        .right{
            background: red;
            float: right;
        }
        .center{
            height: 100%;
            background: green;
            margin-left:200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
    
</body>
</html>

  1. 第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .left,.right{
            width: 200px;
            height: 100%;
        }
        .left{
            background: yellow;
            float: left;
        }
        .right{
            background: red;
            float: right;
        }
        .center{
            width: calc(100% - 400px);
            height: 100%;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
    
</body>
</html>

中间盒子宽度自适应。

  1. 综合例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .top,.bottom{
            width: 100%;
            height: 50px;
            background: #ccc;
        }
        .middle{
            height: calc(100% - 100px);
            background: yellow;
        }
        .left,.right{
            width: 100px;
            height: 100%;
            background: red;
            float: left;
        }
        .center{
            width: calc(100% - 200px);
            height: 100%;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="middle">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
        
    </div>
    <div class="bottom"></div>
</body>
</html>

FFZH00
关注
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS 学习笔记
01-19
id的优点（class的缺点）：id写在css用#选择器，class写在css中用.选择器。#选择器的优先级高于.选择器大约10倍，所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的。而class标签，或者...
前端list列表自定义图标并设置大小
云梦归遥【qq_45834685】
08-30 2938
前端list列表自定义图标并设置大小
前端开发之html属性style对象获取和设置行内样式
imbzz的博客
07-25 3964
html属性style对象获取和设置行内样式
CSS学习笔记——样式书写位置
weixin_43900407的博客
01-25 1640
1.内部样式表（内嵌式） 将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，style标签一般放在head标签中，也可以放在HTML文档的任何地方。 <style type="text/CSS"> div { font-size:24px; color:red; } </style> 2.内联样式（行内式） 通过标签的...
Word的样式库在 选项卡中_如何使用word文档？word文档使用技巧教程？
weixin_39871562的博客
11-13 1857
Word文档使用方法与教程：使用正确的部分和章节标题我们在前面的章节中介绍了预设样式，但是这些样式可用于快速创建章节，子标题和标题页。在“主页”功能区选项卡中找到样式，可以在其中找到许多文本格式设置选项。当您需要一种格式化文本和内容的方法时，首先要查找要查找的内容的地方是“主页”功能区选项卡。创建新的空白Word文档时，请单击“主页”选项卡以查看预设样式的列表。(字体格式的样式类别)在上图中，选择...
css学习笔记1
qq_42236791的博客
12-12 961
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2373
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
wz_1992的博客
05-30 483
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
CSS学习笔记（详细）
jojo_oulaoula的博客
05-13 724
Cascading Style Sheet 级联样式表表现为HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定若将HTML比做人的骨架，那么CSS就是皮肤，在骨架的架构上进行修饰美化。CSS文件后缀名就是.css。
css学习笔记
09-12
本“CSS学习笔记”涵盖了这个重要主题的广泛知识，旨在帮助开发者深入理解和熟练运用CSS。 首先，我们要理解CSS的基本概念。CSS采用选择器+声明的方式工作，选择器用于选取要应用样式的元素，而声明则包含属性和值...
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
css的选择器有哪些？权重由大到小是怎么排序的？
最新发布
BANaanaa的博客
09-10 686
来看看css的选择器与权重比吧
js的书写位置和css的书写位置的区别？为什么要这样写？
QQ1257871322的博客
09-10 316
这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2210
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
css 个人喜欢的样式 速查笔记
waterHBO的博客
09-07 431
记录自己喜欢的， 觉得比较好看的 css.下次用的时候，直接复制，很方便。
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 239
【代码】css鼠标移动过去变成手的图标。
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值