前端 -- CSS

时间：2019-08-15 22:04:31 阅读：88 评论：0 收藏：0 [点我收藏+]

11.2 CSS

CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

11.2.1 导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入方式二:内接引入-->
    <style>
        div{
            color: deepskyblue;
        }
    </style>
    
<!--    引入方式三:外接样式_链接式:link导入一个链接*****-->
    <link rel="stylesheet" href="index.css">
    
<!--    引入方式四:外接样式:style导入一个@import url("路径")-->
    <style>
        @import url("index.css");
    </style>
</head>
<body>
    
<!--引入方式一:行内引入-->
<div style="color: red;">字体颜色设置</div>
    
</body>
</html>

<!--css基本设置-->
?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: rebeccapurple;
            width: 200px;
            height: 400px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div>最简单的基本样式</div>
</body>
</html>

11.2.2 选择器

基本选择器

1.标签选择器

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        span{
            color: blue;
        }
        a{
            color: green;
        }
    </style>
</head>
<body>
<div>
    标签选择器:div1的颜色  /* red */
    <span>标签选择器:div中的span的颜色</span> /* blue */
</div>
<span>标签选择器:单独span的颜色</span> /* blue */
<div>
    标签选择器:div2的颜色 /* red */
    <a href="http://www.baidu,com">标签选择器:链接的颜色</a> /* green */
</div>
</body>
</html>
?
?


/* 1.子元素会继承父元素的的样式,但是a标签除外
   2.要想对a标签进行设置,必须直接找到a标签的位置,对a单独设置
   3.样式之间的重叠部分是有优先级的,继承下来的优先级为0(最低)*/

2.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            color: purple;
        }
    </style>
</head>
<body>
<div id="div1">
    id选择器:有id的div1的颜色 /* purple */
    <span>id选择器:div中的span颜色</span> /* purple */
</div>
<div>
    id选择器:div2的颜色
</div>
</body>
</html>

3.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl{
            color: orangered;
        }
    </style>
</head>
<body>
<div>
    类选择器:div1的颜色
    <span class="cl">类选择器:div1中的span颜色</span> /* orangered */
</div>
<div>
    类选择器:div2的颜色
    <span class="cl">类选择器:div2中的span颜色</span> /* orangered */
</div>
</body>
</html>

4.通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: yellow;
        }
    </style>
</head>
<body>
<div>
    通用选择器:div1颜色 /* yellow */
    <span>通用选择器:span颜色</span> /* yellow */
</div>
<div>
    通用选择器:div2颜色 /* yellow */
</div>
</body>
</html>

高级选择器

1. 后代\子代选择器

后代选择器:找的是子子孙孙,全部都找出来.

子代选择器:只找后面一代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代*/
       div span{
           color: tomato;
        }
        /*子代*/
       div>span{
           color: tomato;
        }
    </style>
</head>
<body>
<div>
    我是div标签的content
    <span>后代1:西红柿色</span> /*后代变色*/ , /*子代只有这个变色*/
    <p>
        在div-p标签中
       <span>后代2:西红柿色</span> /*后代变色*/
    </p>
</div>
<span>我只是一个单纯的span标签</span>
</body>
</html>

2. 毗邻\弟弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*毗邻*/
       span+a{
           color: tomato;
        }
        /*弟弟*/
        span~a{
           color: tomato;
        }
    </style>
</head>
<body>
<div>
    <a>我是a0标签</a>
    <span>span标签</span>
/* 如果这里还有一个非a标签,毗邻.下面不变色 */
    <a>我是a1标签</a>  /*弟弟:变色*/ , /*毗邻:变色*/
    <a>我是a2标签</a>  /*弟弟:变色*/
</div>
</body>
</html>

3. 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a[href]{
            color: green;
        }
        a[href=‘http://www.taobao.com‘]{
            color: lightpink;
        }
        input[type=‘text‘]{
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div>
        <a href="http://www.taobao.com">我是a0标签</a> /*属性:href变色*/ /*属性:href有网址的变色*/
        <span>span标签</span>
        <a href="http://www.jd.com">我是a1标签</a> /*属性:href变色*/
        <a href="http://www.mi.com">我是a2标签</a> /*属性:href变色*/
        <a>没有href属性</a>
    </div>
    <input type="text"> /*属性:type=‘texe‘变色*/
    <input type="password">
</body>
</html>

4. 并集\交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 并集选择器 */
    ul,ol,span{
       background-color: gainsboro;
    }
    </style>
</head>
<body>
    <ul>
        <li>u-first</li> /* 并集变色 */
    </ul>
    <ol>
        <li>o-first</li> /* 并集变色 */
    </ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 交集选择器 */
        div.box1.box2{
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1 box2">box1box2</div>  /* 交集:变色 */
    <div class="box1">box1</div>
    <div>aaa</div>
    <span class="box1">span标签</span>
</body>
</html>

5. 伪类选择器

a 专属 : link visited active
input 专属 : focus
通用 : hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 链接点击之前的颜色 */
        a:link{
            color:tomato;
        }
        /* 链接点击之后的颜色 */
        a:visited{
            color: gray;
        }
        /* 点击时的颜色 */
        a:active{
            color: green;
        }
        /* 点击对话框的颜色 */
        input:focus {
            background-color: aquamarine;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: lightgray;
        }
        /* 鼠标悬浮变色 */
        div:hover{
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="http://www.jd.com">京东</a>
    <a href="http://www.xiaohuar.com">校花</a>
    <input type="text">
    <div></div>
</body>
</html>

6. 伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 第一个字变色 */
        p:first-letter{
            color: green;
        }
        /* 所选内容前面添加的内容:变色 */
        p:before{
            content: ‘**‘;
            color: pink;
        }
        /* 所选内容后面添加的内容:变色 */
        p:after{
            content: ‘.....‘;
            color: lightblue;
        }
    </style>
</head>
<body>
    <p>春江水暖鸭先知</p>
</body>
</html>

7. 选择器的优先级

行内>id选择器>类选择器>标签选择器>继承
1000   100     10        1       0
?
所有的值可以累加但是不进位
相同优先级的放在后面的生效
!important 提高样式的优先级到最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: lavender;
        }
       div#AA{
            background-color: red;
        }
        div.aa{
            background-color: green;
        }
        div.aa.bb{
            background-color: yellow;
        }
        div#BB{
            background-color: pink;
        }
    </style>
</head>
<body>
<div>普通的div</div>   /* lavender */
<div id="AA">有一个id的div</div>   /* red */
<div class="aa">有一个类的div</div>   /* green */
<div class="aa bb">有两个个类的div</div>   /* yellow */
<div class="aa" id="BB">有一个类并且有一个id的div</div>   /* pink */
</body>
</html>

11.2.3 颜色表示

rgb表示法:
    rgb:red green blue 光谱三原色
    rgb(255,255,255) 白色
    rgb(0,0,0) 黑色
?
16进制的颜色表示法:
    #000000 - #ffffff
    #000 - #fff
?
单词表示法:
    red blue yellow
?
rgba表示法:
    a表示透明度,0-1,0是完全透明,1是不透明
?
颜色对照表
    https://htmlcolorcodes.com/zh/yanse-ming/

11.2.4 字体设置

属性	描述	属性值	说明
font-size	字体大小	50px
font-family	字体系列	"Microsoft Yahei","微软雅黑", "Arial", sans-serif	浏览器使用它可识别的第一个值
font-weight	字体粗细	none bold border lighter 100~900 inherit	默认值，标准粗细粗体更粗更细值，400=normal，700=bold 继承父元素字体的粗细值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-family: ‘楷体‘,‘宋体‘;
            font-weight: bolder;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p>字体设置</p>
</body>
</html>

11.2.5 文本设置

属性	描述	属性值	说明
text-indent	首行缩进	单位建议em
text-align	文本对齐方式	none center left right justify	默认水平居中左对齐右对齐两端对齐
text-decoration	规定文本修饰的样式	none underline overline line-through inherit	默认下划线定义文本上的一条线定义穿过文本下的一条线继承父元素text-decoration属性的值
line-height *	行高	line-height: 200px;	设置行高=容器高度,文字自动垂直居中
text-shadow	阴影	5px 5px 5px #FF0000	水平方向偏移量 / 垂直方向偏移量 / 模糊度 / 阴影颜色
text-overflow	文字溢出	clipellipsis	修剪文本显示省略号代表被修剪文本

<!-- 文字溢出 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        .div0 {
            width: 300px;
            border: 1px solid darkblue;
        }
        .div1 {
            width: 300px;
            border: 1px solid red;
 
            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
        }
        .div2 {
            width: 300px;
            border: 1px solid black;
 
            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
            /*修剪超出的文本*/
            text-overflow: clip;
        }
        .div3 {
            width: 300px;
            border: 1px solid chocolate;
 
            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
            /*显示省略符号来代表被修剪的文本*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
</body>
</html>

11.2.6 背景图片

background-repeat	设置背景图像的平铺方式
repeat	默认。背景图像将在垂直方向和水平方向重复
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeate	背景图像将仅显示一次

background-position	设置背景图像的起始位置
100px 100px	图片与左边 / 上边的边距
top / center / bottom	垂直位置 : 上 / 中 / 下
left / center / right	水平位置 : 左 / 中 / 右
background-size	图片大小
background-attachment: fixed	固定背景图片的位置,页面滚动图片不会移动
background-image: url(xxx.jpg)	背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 1000px;
            background-color: deepskyblue;
            background-image: url(xjs.jpg);
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-position: 100px 100px;
            background-position: center top;
            background-attachment: fixed;
            background: red url("xjs.jpg") no-repeat left center; /* 综合写法 */
        }
    </style>
</head>
<body>
<div>
    <p>我是一个小僵尸</p>
</div>
</body>
</html>

11.2.7 边框的设置

可分别设置四边的颜色,粗细,样式,遵循上右下左的顺序

一个值:上下左右
两个值:遵循上下 / 左右
三个值:上 / 右左 / 下
四个值:遵循顺时针上右下左

border的设置	解释
border-color	边框颜色
border-width	边框粗细
border-style	边框样式
border: color width style	综合写法:设置边框颜色,粗细,样式
border-radius	设置圆角

11.2.8 块和行内的概念 / 转换

行内元素：

与其他行内元素并排；
对于行内标签来说不能设置宽和高,默认的宽度，就是文字的宽度

块级元素：

独占一行，不能与其他任何元素并列；
能设置宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border-color: blue;
            border-width: 5px;
            border-style: solid double dotted dashed;
            border-top-color: orangered; 
            border-top-style: solid;
            border-top-width: 3px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

display的属性值	解释
display: block;	独占一行并且可以设置宽高
display: inline-block;	既可以设置宽高又不会独占一行行内\块转行内快
display: inline;	表示一个行内元素,不能设置宽高
display: none;	不仅不显示内容,连位置也不占了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            /*display: block;*/
            display: inline-block;
            /*width: 100px;*/
            height: 20px;
            background-color: purple;
            text-align: center;
            line-height: 20px;
            text-decoration: none;
        }
        div{
            display: inline-block;
            width: 50px;
            height: 50px;
            border-color: orangered;
            border-style: solid;
        }
        div.div{
            display: none;
            width: 50px;
            height: 50px;
            border-color: blue;
            border-style: solid;
        }
    </style>
</head>
<body>
<div class="div"></div>
<div></div>
<a href="">a标签1</a>
<a href="">a标签2</a>
</body>
</html>

11.2.9 盒模型

背景包含的部分: padding + content
盒模型大小计算:width/height + padding*2 + border*2

技术分享图片

代码	解释
margin	外边距(盒子与盒子之间的距离)
margin-left: auto	表示靠左
margin-right: auto	表示靠右
margin: 0 auto	表示居中 (父/子盒子都要有宽度)
padding	内边距(内容框与边框的距离)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.box1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: solid purple 10px;
            padding: 20px;
            /*margin: 20px;*/
            margin-bottom: 20px;
        }
        div.box2{
            width: 100px;
            height: 100px;
            background-color: red;
            border: solid purple 10px;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="box1">盒模型大小计算:宽+padding*2+border*2</div>
<div class="box2">盒子2</div>
</body>
</html>

<!-- 盒子模型例子 -- 三角形 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 0;
            height: 0;
            border-color: red transparent transparent transparent; /* trandparent:透明 */
            border-width: 50px;
            border-style: solid;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

11.2.10 浮动

float：	表示浮动的意思
float：none	表示不浮动，默认
float：left	表示左浮动
float：right	表示右浮动

浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了,并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版

浮动的四大特性：

浮动的元素会脱离标准文档流
浮动的元素互相贴靠
浮动的元素有"子围"效果
收缩的效果:：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.main{
            height: 100px;
            background-color: darkgray;
        }
        div.box{
            width: 100px;
            height: 100px;
            border: solid red;
            background-color: yellow;
            float: right;
        }
        div.father{
            background-color: forestgreen;
            /*overflow: hidden;*/    /*清除浮动二 BFC*/
        }
        /* .clear{ */           /* 清除浮动一 */
        /*    clear: both;  */
        /*  }  */ 
        /* 伪元素清除浮动 */
        .clearfix:after{
            content: ‘‘;
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
<div class="father clearfix">
    <div class="box"></div>
    <div class="box"></div>
<!--    <div class="clear"></div>-->
</div>
<div class="main">
    主页的内容
</div>
</body>
</html>

11.2.11 定位

定位	功能
position: relative	相对定位
position: absolute	绝对定位
position: fixed	固定定位

相对定位:相对自己原来的位置移动,移动之后还占据原来的位置

绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级会提升.如果设置了绝对定位的子元素的父元素没有设置position,那么子元素的所有设置都是基于整个页面.如果设置了position,子元素的绝对定位会根据父元素的位置定位.父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置

固定定位 :固定是相对于整个窗口的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .d{
            width: 400px;
            height: 1000px;
            background-color: lavender;
            position: relative;
            left: 200px;
        }
        .d1{
            background-color: red;
        }
        .d2{
            background-color: yellow;
            position: absolute;
            left: 100px;
        }
        .d3{
            background-color: green;
        }
        img{
            position: fixed;
            right: 10px;
            bottom: 10px
        }
    </style>
</head>
<body>
<div class="d">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>
<img src="xjs.jpg" alt="xiaojiangshi">
</body>
</html>

11.2.12 z-index

用法说明:

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            z-index: 10;
        }
        .d2{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            z-index: 5;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>

11.2.13 opacity

调整整个标签的透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div>
    我只是一个小僵尸
    <img src="xjs.jpg" alt="小僵尸">
</div>
?
</body>
</html>

11.2.14 overflow

overflow	解释
overflow: visible	可见(默认)
overflow: hidden	超出部分隐藏
overflow: scroll	超出显示滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>
        <p>23期的学生都饿了想吃饭 非常想</p>
        <p>23期的学生都饿了想吃饭 非常想</p>
        <p>23期的学生都饿了想吃饭 非常想</p>
        <p>23期的学生都饿了想吃饭 非常想</p>
    </div>
</body>
</html>

分方向的设置

位置	上	右	下	左
边框	border-top	border-right	border-bottom	border-left
内边距	padding-top	padding-right	padding-bottom	padding-left
盒子	margin-top	margin-right	margin-bottom	margin-left

在css中去掉列表的样式
ul,li{
   list-style: none;
}

前端 -- CSS

原文：https://www.cnblogs.com/Agoni-7/p/11360816.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)