前端之css

css

　　层叠样式表 Cascading Style Sheet ,定义如何显示HTML元素

「1」css语法结构

　　选择器 {属性:属性值;属性:属性值;属性:属性值;}

p {color: red；} 标签名｛颜色属性：颜色；｝

「2」css注释

/*注释内容*/

「3」三种引入css样式的方式

引入：link标签引入外部css文件
内部：head内style标签内部直接书写css代码
行内：直接在标签内通过style属性书写css样式

注意：页面css样式通常都应该写在单独的css文件中

<!--引入-->
<head>
    <link href="mystyle.css" rel="stylesheet">
</head>


<!--内部-->
<head>
    <style>
        p{
            background-color: #336699;
        }
    </style>
</head>


<!--行内-->
<p style="color: red">行内style</p>

「4」学习css的流程

1.如何查找标签

基本选择器：标签选择器 p、id、类、通用选择器

标签选择器: p标签

id选择器: #i1

类选择器：.c1

通用选择器：*

<style>
    p {
        color: red;
    }
    #i1 {
        background: red;
    }
    .c1 {
        font-style: normal;
    }
    * {
        font-kerning: auto;
    }
</style>

组合选择器：

后代选择器：div p 所有 div 内部的 p 标签

儿子选择器: div>p　　所有父级是 div 的 p 标签

毗邻选择器: div+p　　所有紧挨着 div 的 p 标签

弟弟选择器: #i1~p　　i1后面所有的同级的 p 标签

<style>
    div p {
        color: aqua;
    }
    div>p {
        background-color: aquamarine;
    }
    div+p {
        font-size: large;
    }
    #i1~p {border: solid royalblue 2px;}

</style>

属性选择器

p[title]　　带有指定属性title的标签

p[title="123"]　　带有指定属性title和值123的标签

<style>
    p[title] {
        color: chartreuse;
    }
    p[title="one"]{
        color: red;
    }
</style>

伪类选择器

　　input输入框获取焦点：input:focus{}

　　a链接标签：未访问链接 a:link

已访问链接 a:visited

鼠标移动到链接上 a:hover

选定链接 a:active

<style>
    div,p,span {
        color:red
    }
    a:link {
        color:red;
    }
    a:hover {
        color:yellow;
    }
    a:active {
        color:black;
    }
    a:visited {
        color:green;
    }
    input:focus {
        outline: none;
        background-color:red;
    }
</style>

伪元素选择器：针对标签里的特定内容设定样式

　　first-letter 首字母

　　before 标签之前插内容

　　after 标签之后插内容

<style>
    p:first-letter{
        font-size:48px;
        color: magenta;
    }
    p:before{
        content:'◕‿◕';
        color:dodgerblue;
    }
    p:after{
        content:"(◕ω＜)☆ ";
        color:orangered;
    }
</style>

分组和嵌套

分组：多个元素的样式相同时，可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式

嵌套：多种选择器可以混合起来使用例：.c1类内部所有p标签设置字体颜色为红色

div, p {
  color: red;
}


.c1 p {
  color: red;
}

2.选择器的优先级

css继承：不仅仅应用于某个特定的标签，同样可应用于它的后代

权重为0，一些不能被继承的属性：border,margin,padding,background....

1）相同的选择器，不同的引入方式：就近原则，越靠近标签优先级越高

2）不同的选择器，相同的引入方式：行内 > id选择器 > 类选择器 > 标签选择器

　　另外，！important 可以强制让样式生效，但会使样式文件混乱而不易维护，不到万不得已不要使用！

3.如何给查找到的标签设置样式

关于标签：

　　1.id用来唯一标识标签

　　2.标签类属性class(******),可以有多个值
　　　　ps:你可以把它理解成python面向对象的继承

　　3.可以给任意的标签加任意的属性名和属性值

1）标签大小

为标签设置高度和宽度：宽 width 高 height

块儿级标签才能设置该属性

div {
    width: 100px;
    height: 100px;
}

2）字体属性

字体 font-family：把多个字体名称作为一个“回退”系统来保存。浏览器会使用它可识别的第一个值

大小 font-size：设置为inherit，则会继承父标签字体大小

字重 font-weight：normal标准（400）、bold粗体（700）、bolder更粗、lighter更细、inherit继承父类粗细、100~900设置具体粗细

颜色 color：设置文字的颜色

p {
    font-family: "Microsoft Yaher","微软雅黑","Arial",sans-serif;
    font-size: 16px;
    font-weight: lighter;

    /* 颜色样式：可以任选一种表达方式 */
    color: red;
    color: #ff6928;  /* 十六进制值 */
    color: rgb(130, 48, 255);
    color: rgba(76, 255, 61, 0.8);  /* 最后一个参数alpha：透明度，范围 0.0~1.0 */
}

3）文本属性text

文字对齐 text-align：水平对齐方式，center居中、left左对齐（默认）、right右对齐、justify两端对齐

文字装饰 text-decoration：特殊效果，none、underline下划线、overline上划线、line-through划掉、inherit继承

首行缩进 text-indent：段落开头缩进;

p {
    text-align: center;
    text-decoration: underline;
    text-indent: 48px;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;  /* ul去除自带样式 */
    padding-left: 0;  
}

4）背景属性

背景颜色 background-color：

背景图片 background-image：url("")

背景位置 background-position：top、bottom、left、right 和 center、百分数值（百分数值同时应用于元素和图像）、长度（像素值）；

背景重复 background-repeat： repeat默认平铺，repeat-x水平方向最上平铺一排，repeat-y竖直方向最左平铺一列， no-repeat不平铺

背景关联 background-attachment：默认值scroll，声明图像相对于可视区是固定的（fixed）；

div {
    width:1000px;
    height:400px;
    background-color: aqua;
    background-image:url("MySQL_wps图片.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}

/* 简写 */
div {
    width:1000px;
    height:400px;
    background: no-repeat center url("MySQL_wps图片.png") blue fixed;
}

一个有趣实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559733904&di=d48adc96ca63da62d56fef7d9257c5e6&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201404%2F13%2F20140413212610_JiUtU.jpeg")  center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="box"></div>
    <div class="d3"></div>
</body>
</html>

以图片为屏幕背景

5）边框

样式 border-style：无 none、点状虚线 dotted、矩形虚线 dashed、实线 solid
宽度 border-size
颜色 border-color

弧度 border-radius：圆角边框的效果，长或高的一半 or 50% 可得到一个圆形

/* 边框属性 */
p {
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

/* 边框的边 */
div {
    border-left:3px solid red;
    border-top:3px solid red;
    border-right:3px solid red;
    border-bottom:3px solid red;
}

/* 简写 */
div {
    border:3px solid red;
}

/* 获得圆形边框 */
div {border-radius:50%;}

6）display属性

控制HTML显示效果，

none：display:"none"不显示不占位，visibility:hidden仅仅隐藏

block：默认占满页面宽度，指定了宽度会以margin填充剩下部分；

inline：按行内元素显示，width、height、margin、float都将失效；

inline-block：同时具有行内元素和块儿级元素的特点

div {display:none}  不显示不占位

7）css盒子模型

margin:用来调节盒子与盒子之间的距离(标签与标签之间距离)
border:盒子的包装厚度(边框)
padding:内部物体与盒子之间距离(文本与边框之间的距离)
content:物体大小(文本内容）

/* margin的四边边距 */
body {
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    margin-left:0;
}
.c1 {
    width: 100px;
    height: 100px;
    border: 3px solid red;
    padding:10px 20px 15px;  /* 上  左右  下 */
}
.c2 {
    width: 100px;
    height: 100px;
    border: 3px solid green;
    margin-top: 30px;    /* 上 */
    margin-left:20px;    /* 左 */
}
.c3 {
    width:20px;
    height:20px;
    border:3px solid black;
    margin:10px auto  /* 上下   左右（居中）*/
}
.c4{
    width:200px;
    height:200px;
    border:3px solid green;
    padding:10px;  /* 四边 */
    margin-top:10px 20px 15px 30px;  /* 上 右 下 左 */
}

8）float 浮动

任何元素（标签）都可以浮动，故浮动元素会生成一个块儿级框：left、right、none

浮动的特点：浮动框可以向左|向右移动，直到碰到另一个框

　　　　　　浮动框不在文档的普通流中，所以浮动的影响：脱离文档流，造成父标签塌陷

body {
    margin: 0;
}
.c1 {
    width: 50px;
    height: 50px;
    background-color: red;
    display:inline-block;
}

/*升级版↓*/
.c2 {
    width: 50px;
    height:50px;
    background-color: green;
    float:left;
}

浮动的页面布局

body {
    margin:0;
}
.c1 {
    height: 1000px;
    width:20%;
    float:left;
    background:red;
}
.c2 {
    height:1000px;
    width:80%;
    float:right;
    background-color:greenyellow;
}

9）clear属性

规定元素的哪一侧不允许其他浮动元素：left、right、both、none、inherit

只会对自身起作用

清除浮动的副作用：固定高度、伪元素清除法、overflow:hidden

/* 伪元素清除法 */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

10）overflow 溢出属性

overflow 设置两个方向，overflow-x 设置水平方向，overflow-y 设置垂直方向；

visible：多出的部分呈现在元素框之外（默认值）；
hidden：多出来的部分不可见；
scroll：以滚动条查看内容；
auto：有多出来的以滚动条查看内容；
inherit：从父元素继承overflow属性的值；

/* 溢出现象 */
div {
    height:100px;
    width:100px;
    border:3px solid red;
    display:inline-block;
}

/* 解决方法 */
div {
    height:100px;
    width:100px;
    border:3px solid red;
    overflow:auto;
}

圆形头像示例

.c1 {
    width:100px;
    height:100px;
    border:5px solid white;
    border-radius:50%;
    overflow:hidden;
}
img {
    width:100%;
}

11）position 定位

无定位 static：默认值，不能当做绝对定位的参数，不能调整top，left，right，bottom
相对定位 relative：相对于标签本身原来的位置，方便绝对定位元素找到参照物
绝对定位 absolute：相对于已经定位过的父标签再做定位(小米购物车)
固定定位 fixed：相对于浏览器窗口固定在某一个位置(回到顶部)

是否脱离文档流:
　　脱离文档流：浮动、绝对定位、固定定位
　　不脱离文档流：相对定位

<!-- 返回顶部按钮-->
<!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">
  <title>返回顶部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>

返回顶部按钮样式示例

返回顶部按钮

相对定位 relative：不脱离文档流

<!DOCTYPE html>
<!--相对定位-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
             height: 50px;
            width: 100px;
            background-color: dodgerblue;
        }
        .c2 {
             height: 100px;
            width: 50px;
            background-color: orange;
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div style="height: 100px;width: 200px;background-color: black"></div>
</body>
</html>

相对定位

相对定位

绝对定位 absolute：脱离文档流

<!DOCTYPE html>
<!--绝对定位-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1 {
            height: 50px;
            width: 100px;
            background-color: red;
            position: relative;
        }
        .c2 {
            height: 50px;
            width: 200px;
            background-color: green;
            position: absolute;
            left: 50px;
        }
    </style>
</head>
<body>
<div class="c1">购物车
    <div class="c2">空空如也~</div>
    <div style="height: 50px;width: 100px;background-color: deeppink"></div>
</div>

</body>
</html>

绝对定位

绝对定位

固定定位 fixed：脱离文档流

<!DOCTYPE html>
<!--固定定位-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="c1" style="height: 50px;width: 500px;background-color: black"></div>
<div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div>
<div class="c3" style="height: 10px;width: 100px;background-color: green"></div>

</body>
</html>

固定定位

12）z-index

设置对象的层叠顺序，调整页面与用户的距离：

♥ 1.以屏幕作为0基点，值越大离屏幕越远，覆盖值小的页面
♥ 2.只有定位了的元素才有z-index，浮动元素不能使用z-index
♥ 3.z-index值为正整数，默认为0；z-index相等时，则处于HTML靠下的部分覆盖前面的部分
♥ 4.从父现象：父z-index低，子z-index值再高也无效

<!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">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

自定义模态框示例

13）opacity

定义透明效果，调整的是所有标签的透明度(包括颜色)，范围：完全透明0.0~1.0不透明

与color:rgba(76, 255, 61, 0.8)差异：rgba只能设置背景，对文本无效

.c1 {
    width: 200px;
    height: 50px;
    background-color: rgba(128,128,128,0.3);
}
.c2 {
    opacity: 0.3;
}

posted @ 2019-05-29 21:07 zhoyong 阅读(217) 评论(0) 编辑收藏举报

刷新页面返回顶部

zhoyong

前端之css

css

公告