CSS

时间：2021-06-06 19:45:03 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：16px 网页 ica 独立比例 z-index 优先级吸引无限

CSS

什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

发展史

CSS1.0
CSS2.0：DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆角，阴影，动画……浏览器兼容性

基本入门

style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 规范，<style>可以编写CSS的代码，每一个声明，最好使用分号结尾
     语法：
        选择器{
                声明1;
                声明2;
                声明3;
          }
        -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

分离，link获取(建议使用这种)

h1{
    color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

CSS的优势
1. 内容和表现分离
2. 网页结构表现统一，可以实现复用
3. 样式十分的丰富
4. 建议使用独立于html和css文件
5. 利于SEO，容易被搜索引擎收录！

CSS的三种导入方式

内部样式
外部样式
行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 内部样式 -->
    <style>
        h1{
            color: red;
        }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 优先级：就近原则 -->
<!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color: #1F87CC">我是标题</h1>
</body>
</html>

/*
外部样式
 */
h1{
    color: yellow;
}

拓展：外部样式两种写法

链接式

HTML

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css.css">

导入式

@import是CSS2.1特有！

<!-- 导入式 -->
    <style>
        @import "css.css";
    </style>

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

标签选择器：选择一类标签标签{}

 /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #a13d30;
        }

类选择器class：选择所有class属性一致的标签，跨标签 .类名{}

/*类选择器的格式，.class的名称{}
        好处，可以多个标签归类，是同一个class
        */
        .a1{
            color: #3cbda6;
        }
        .b2{
            color: #0D7114;
        }

id选择器：全局唯一！ #id名{}

 /* id选择器：id必须保证全局唯一！
        #id名称{}
        */
        #1{
            color: pink;
        }
        /*选择器优先级
        不遵循就近原则，固定的
        id选择器>类选择器>标签选择器
        */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="1">标题1</h1>
<h1 class="a1">标题2</h1>
<h1 class="b2">标题3</h1>
<p class="b2">标签</p>
</body>
</html>

优先级：id>class>标签

层次选择器

后代选择器：在某个元素的后面(祖爷爷-爷爷-父亲-儿子)，以空格表示

/*后代选择器*/
body p{
    background: pink;
}

子选择器：一代(儿子)，以>表示

/*子选择器*/
body>p{
    background: blue;
}

相邻兄弟选择器：只有一个，相邻向下(同辈)，以+表示

/*相邻兄弟选择器*/
.active+p{
    background: yellow;
}

通用兄弟选择器：当前选中元素的向下所有兄弟(同辈)，以~表示

/*通用兄弟选择器*/
.active~p{
    background:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
<p class="active">p7</p>
<p>p8</p>
</ul>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 避免使用class，id选择器 -->
    <style type="text/css">
        /*ul的第一个子元素*/
        ul li:first-child{
            background: rebeccapurple;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: green;
        }
       /* 选择当前p元素的父元素,选择父级元素的第一个，并且是当前元素才生效*/
        p:nth-child(1){
            background: saddlebrown;
        }
        /* 选择当前p元素的父元素,选择父级元素的第二个当前元素*/
        p:nth-of-type(2){
            background: aqua;
        }
        
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #1F87CC;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值(正则)
        = 绝对等于
        *=包含这个元素
        ^=以这个开头
        $=以这个结尾*/
        /*存在id属性的元素a[]{}*/
        a[id]{
            background: yellow;
        }
        /*id=first的元素*/
        a[id=first]{
            background: green;
        }
        /*class中有links的元素*/
        a[class*=‘links‘]{
            background: red;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: blue;
        }
        a[href$=doc]{
            background: red;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://www.360.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item " >3</a>
    <a href="images/123.png" class="links item " >4</a>
    <a href="images/123.jpg" class="links item " >5</a>
    <a href="abc" class="links item " >6</a>
    <a href="/a.pdf" class="links item " >7</a>
    <a href="/abc.pdf" class="links item " >8</a>
    <a href="abc.doc" class="links item " >9</a>
    <a href="abcd.doc" class="links item last" >10</a>
</p>
</body>
</html>

并集、交集选择器

并集选择器

多个选择器通过逗号连接而成，同时声明多个风格相同样式

交集选择器

由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*并集选择器*/
        p,h1,.ss,#dd{
            color: red;
            font-family: 宋体;
        }
       /* 交集选择器*/
        p.testp{
            color: yellow;
        }
        div#dd{
            color: #1F87CC;
        }
    </style>
</head>
<body>
<h1>cdvjsjv kbs</h1>
<p>sssssss<span class="ss">asssssssssss</span>asd</p>
<h1>kasjfsdjhkj</h1>
<div id="dd">ccc</div>
<br>
<h1>sckadvsu</h1>
<span class="ss">ssssss</span>
<p class="testp"> saasdvs</p>
<div class="testp">
    <h1>czcz zx</h1>
</div>
<p class="testa">safafa</p>
</body>
</html>

美化页面元素

为什么要美化网页
1. 有效的传递页面信息
2. 美化网页，页面漂亮，才能吸引用户
3. 凸显页面的主题
4. 提高用户的体验
span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        #title{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <span id="title">Java</span>
</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 
        font-family:字体
        font-size:字体大小
        font-weight:字体粗细
        color: 字体颜色
        font:字体风格
     -->
    <style >
        body{
            font-family: 宋体;
            color: #1F87CC;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
        p{
            font:oblique bolder 12px "黑体";
        }
    </style>
</head>
<body>
<h1>斗罗大陆 </h1>
<p class="p1">《斗罗大陆》是唐家三少创作的穿越玄幻小说，2008年12月14日-2009年12月13日首发于起点中文网，2009年5月首次出版。</p>
<p>《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂，由人修炼为神，最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为
斗罗大陆最强者的故事 [1]  。主要角色有唐三、小舞、戴沐白等。</p>
</body>
</html>

文本样式

颜色：color rgb rgba
文本对齐的方式：text-align=center
首行缩进：text-indent:2em;
行高：line-hright
装饰：text-decoration
文本图片水平对齐：vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
     颜色：
          单词
          RGB 0~F
          RGBA
          text-align: 排版，居中
          text-indent:段落首行缩进
          height: 300px;
          line-height: 300px;
          行高，和块高度一致，就可以上下居中
     -->
    <style >
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: pink;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*水平对齐*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    <img src="img/a.png" alt="">
    <span>asfdvsvdvsd</span>
</p>
<a href="">123</a>
<p class="l1">123</p>
<p class="l2">123</p>
<p class="l3">123</p>
<h1>斗罗大陆 </h1>
<p class="p1">《斗罗大陆》是唐家三少创作的穿越玄幻小说，2008年12月14日-2009年12月13日首发于起点中文网，2009年5月首次出版。</p>
<p class="p2">《斗罗大陆》讲述的是穿越到斗罗大陆的唐三如何一步步修炼武魂，由人修炼为神，最终铲除了斗罗大陆上的邪恶力量，报了杀母之仇，成为
斗罗大陆最强者的故事 [1]  。主要角色有唐三、小舞、戴沐白等。</p>
</body>
</html>

文本阴影

/*text-shadow:阴影的颜色，水平偏移，垂直偏移，阴影半径 */
        #price{
            text-shadow:yellow 10px 10px 10px ;
        }

超链接伪类

正常情况下，a,a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的状态*/
        a:link{
            color: red;
            text-decoration: none;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orangered;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: green;
        }
       /* 点击过之后的状态*/
        a:visited{
            color: pink;
        }   
    </style>
</head>
<body>
<a href="#">
    <img src="images/a.jpg" alt="">
</a>
<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    <a href="#">作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>
</body>
</html>

列表样式

#nav{
    width: 300px;
    background: red;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: pink;
}
/*ui li*/
/*
list-style
    none:去掉原点
    circle：空心圆
    decimal:数字
    square:正方形
 */
ul li{
    height: 30px;
    list-style: none;
    text-indent:1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: saddlebrown;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

背景图像

背景颜色
背景图片

div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/a.jpg");
}
/*默认是全部平铺的repeat*/
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}
/*颜色，图片，图片位置，平铺方式*/
.title{
    background: red url("imgs/d.gif") 270px 10px no-repeat;
}
ul li{
    height 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("imgs/r.gif")
    background-repeat: no-repeat
    background-position: 230px 2px
}

渐变

/*径向渐变，圆形渐变*/
        body{
            background-color: #4158D0;
            background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 36%, #FFCC70 66%, #ffffff 100%);
        }

盒子模型

什么是盒子模型

盒子模型由margin(外边距)、padding(内边距)、border(边框)组成

盒子的计算方式：你这个元素到底多大？

margin+border+padding+内容宽度

边框

边框的粗细
边框的样式
边框的颜色

 /*body总有一个默认的外边距，可以设置margin：0，常见操作*/
 /*要求：块元素，块元素有固定的宽度*/
        h1,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
       /* border：粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        div:nth-of-type(1) input{
            border: 3px dashed pink;
        }

内外边距

 /*外边距的妙用：居中元素*/
       #box{
           margin: 0 auto;
       }
        /*
        顺时针旋转
        表示全部的(margin:0)
        表示上下 左右(margin:0 0)
        表示上 下 左右(margin:0 0 0)
        表示上 下 左 右( margin:0 0 0 0)
        内边距也同样
         */
       /*
       left:左
       right:右
       top:上
       bottom:下
        */
        div{
            margin: 1px 2px 3px 4px;
            padding: 4px 3px 2px 1px;
        }
        ol{
            margin-right: 4px;
            margin-bottom: 5px;
            padding-left: 5px;
            padding-top: 6px;
        }

圆角边框

/*
        左上 右上 右下 左下，顺时针方向
         */
        /*
        圆圈： 圆角=半径！
         */
      div{
          width: 100px;
          height: 100px;
          background: pink;
          border-radius: 50px;
      }
        /*半圆：正半圆，高是宽的一半，两个上角调到和高一样*/
        div{
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
        }

盒子阴影

/* 盒子阴影：高度 宽度 阴影比例 颜色*/
        div{
            width:100px;
            height: 100px;
            border: 10px solid yellow;
            box-shadow: 10px 10px 5px pink;
        }

浮动

标准文档流
- 块级元素：独占一行
```
h1~h6 p div 列表……
```
- 行内元素：不独占一行
```
span a img strong ……
```

display

 /*
        display
        block：块元素
        inline：行内元素
        inline-block：是块元素，但是可以内联，在一行！
        none：不显示
        */
       div{
           width: 100px;
           height: 100px;
           border: 1px solid red;
           display: inline-block;
       }
       span{
           width: 100px;
           height: 100px;
           border: 1px solid red;
           display: inline-block;
       }

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

float

左右浮动float

 /*
       float
       right：右浮动
       left：左浮动
        */
        img{
            border: 1px red dashed;
            display: inline-block;
            float: right;
        }
        .l2{
            border: 1px pink dashed;
            display: inline-block;
            float: left;
            clear: both;
        }

父级边框塌陷的问题

clear

 /*
clear:right右侧不允许有浮动元素
clear:left左侧不允许有浮动元素
clear:both两侧不允许有浮动元素
clear:none没有浮动
*/

解决方案：

增加父级元素的高度

#father{
         border: 1px #1F87CC solid;
         height: 820px;
     }

增加一个空的div标签，清除标签

<div class="clear"></div>

.clear{
         clear: both;
         margin: 0;
         padding: 0;
     }

overflow

在父级元素中增加一个 overflow：hidden

父类添加一个伪类

#father:after{
         content: ‘‘;
         display: block;
         clear: both;
     }

小结：
1. 浮动元素后面增加空的div
简单，代码中尽量避免空div
1. 设置父级元素的高度
简单，元素假设有了固定的高度，就会被限制
1. overflow
简单，下拉的一些场景避免使用
1. 父类添加一个伪类：after(推荐)
写法稍微复杂一些，但是没有副作用，推荐使用！

display和float对比
- display：方向不可以控制
- float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

定位

相对定位

position:relative

相当于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
     div{
         margin: 10px;
         padding: 5px;
         font-size: 12px;
         line-height: 25px;
     }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: pink;
            border: 1px dashed blue;
            position: relative;/*相对定位：上下左右*/
            top:-20px;
            left: 20px;
        }
        #second{
            background-color: pink;
            border: 1px dashed blue;
        }
        #third{
            background-color: pink;
            border: 1px dashed blue;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

绝对定位

absolute

基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动
相对于父级元素或浏览器的位置进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
?
    <style>
       div{
           margin: 10px;
           padding: 5px;
           font-size: 12px;
           line-height: 25px;
       }
        #father{
            border: 1px solid #666;
            padding: 0px;
            position: relative;
        }
        #d1{
            border: 1px dashed #1F87CC;
            background-color: aqua;
        }
        #d2{
            border: 1px dashed #1F87CC;
            background-color: aqua;
            position: absolute;
           left: -10px;
        }
        #d3{
            border: 1px dashed #1F87CC;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="d1">第一个盒子</div>
    <div id="d2">第二个盒子</div>
    <div id="d3">第三个盒子</div>
</div>
</body>
</html>

固定定位

fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
?
    <style>
       body{
           height: 1000px;
       }
        div:nth-of-type(1){/*绝对定位：相当于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
       div:nth-of-type(2){/*fixed：固定定位*/
           width: 50px;
           height: 50px;
           background: yellow;
           position: fixed;
           right: 0;
           bottom: 0;
       }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

z-index

z-index：层级，默认是0，最高无限~999
opacity：0.5背景透明度

#contend{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000;
}
ul li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#contend ul{
    position: relative;
}
.i1,.i2{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 216px;
}
.t1{
    color: white;
    z-index: 999;/*层级*/
}
.t2{
    background: #000;
    opacity: 0.5;/*背景透明度*/
    filter: Alpha(opacity=50);
}

CSS

标签：16px 网页 ica 独立比例 z-index 优先级吸引无限

原文地址：https://www.cnblogs.com/wzhdyyz/p/14855798.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行