CSS

时间：2019-10-09 23:57:49 阅读：185 评论：0 收藏：0 [点我收藏+]

CSS

一、CSS概述

CSS是层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

二、引入方式

CSS一共有四种引入方式：

1 行内式：行内式是在标记的style属性中设定css样式。
2 嵌入式：嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中
3 链接式：将一个CSS文件引入到HTML文件中
4 导入式：将一个独立的CSS文件引入到HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中

三、CSS选择器

CSS分为四种基本选择器：

基础选择器：

1 *:通用元素选择器，匹配任何元素
2 E:标签选择器，匹配所有使用E标签的元素
3 .info和E.info:class选择器，匹配所有class属性中包含info的元素
4 #info和E#info:id选择器，匹配所有id属性等于info的元素

组合选择器：

1 E,F:多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
2 E F:后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
3 E>F:子元素选择器，匹配所有E元素的子元素F
4 E+F:毗邻元素选择器，匹配所有紧随E元素之后的同级元素F

属性选择器：

1 E[att]:匹配所有具有att属性的E元素，不考虑它的值
2 E[att=val]:匹配所有att属性等于val的E元素
3 E[att~=val]:匹配所有att属性具有多个空格分隔的值，其中一个值等于val的E元素
4 E[att^=val]:匹配属性值以指定开头的每个元素
5 E[att$=val]:匹配属性值以指定结尾的每个元素
6 E[att*=val]:匹配属性值包含指定值的每个元素

　　伪类：用来给选择器添加一些特殊效果。

a:link(没有接触过的链接)，用于定义了链接的常规状态
a:hover(鼠标放在链接上的状态)，用于产生视觉效果
a:visited(访问过的链接)，用于阅读文章，能清楚的判断已经访问过的链接
a:active(在链接上按下鼠标时的状态)，用于表现鼠标按下时的链接状态

p:before 在每个<p>元素之前插入内容
p:after 在每个<p>元素之后插入内容

四、CSS优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。优先级如下表所示：

优先级别	描述	举例
1	内联样式表的权限最高	style=""
2	统计选择符中的ID属性个数	#id
3	统计选择符中的class属性个数	.class
4	统计选择符中的HTML标签名个数	p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            color: red;
        }
        .div1{
            color: blue;
        }

        #id2 .div3{
            color: chartreuse;
        }
        #id2 .div2 .div3{
            color: yellow;
        }

        #id3 .div5{
            color: brown!important;
        }
        #id3 .div4 .div5{
            color: darkgoldenrod;
        }
    </style>
</head>
<body>

<div class="div1" id="id1">优先级</div>

<div id="id2">
    <div class="div2">
        <div class="div3">
            嵌套优先级
        </div>
    </div>
</div>

<div id="id3">
    <div class="div4">
        <div class="div5">
            嵌套优先级-important
        </div>
    </div>
</div>

</body>
</html>

优先级

其中有！important声明的规则高于一切优先级。

五、CSS继承

继承是CSS的一个主要特征，它是依赖于祖先后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。如一个body定义了颜色也会应用到段落的文本中。

1 <body style="color: red">
2 <p>hello world!</p>
3 </body>

CSS继承也是有限制的，有一些属性不能被继承，如：border、margin、padding、background等。

六、CSS常用属性

1.颜色属性

1 <div style="color: red">hello world!</div>
2 <div style="color: #d3ffae">hello world!</div>
3 <div style="color: rgb(255,255,0)">hello world!</div>
4 <div style="color: rgba(255,0,0,0.5)">hello world!</div>

2.字体属性

1 <div style="font-size: 20px">hello world!</div>
2 <div style="font-size: 50%">hello world!</div>
3 <div style="font-size: large">hello world!</div>
4 <div style="font-family: ‘Lucida Console‘">hello world!</div>
5 <div style="font-weight: lighter">hello world!</div>
6 <div style="font-style: oblique">hello world!</div>

3.背景属性

1 background-color：颜色(背景颜色)
2 background-image：url(路径)(背景图片)
3 background-position：center(背景居中)
4 background-position：0 center(背景上下居中，靠左)

4.文本属性

1 font-size 文本大小
2 text-align:center 横向排列居中
3 line-height 文本行高
4 vertical-align 设置元素内容的垂直对齐方式，只对行内元素有效
5 text-indent 首行缩进
6 letter-spacing 文本间距
7 word-spacing 单词与单词之间间距
8 text-transform: capitalize 首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            background-color: aquamarine;
            text-align: center;
            line-height: 100px;

        }
    </style>
</head>
<body>

<div>介绍文本属性</div>


</body>
</html>

文本属性

5.边框属性

1 border-style:solid 设置边框实线
2 border-color:颜色 设置边框颜色
3 border-width:设置边框宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 200px;
            /*border: 1px solid red;*/
            border-width: 1px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
<body>

<div class="div1"></div>


</body>
</html>

边框属性

6.列表属性

<style>
        ul,ol{
            list-style: decimal-leading-zero;
            list-style: none;
            list-style: circle;
            list-style: upper-alpha;
            list-style: disc;
        }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ol{
            list-style: none;
        }
    </style>
</head>
<body>

<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

</body>
</html>

列表属性

7.display属性

1 none
2 block
3 inline

display可以将块级标签设置成内联标签，同样可以将内联标签设置成块级标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,p,a,span{
            width: 50px;
            height: 50px;
        }
        div{
            background-color: red;
        }
        p{
            background-color: blue;
            /*display: inline;*/
        }
        a{
            background-color: yellow;
            display: inline-block;
        }
        span{
            background-color: blueviolet;
            display: inline-block;
        }
    </style>
</head>
<body>

<div>div1</div>
<p>p1</p>
<span>span1</span>
<a href="">a1</a>


</body>
</html>

display属性

8.外边距和内边距

margin(外边距):用于控制元素与元素之间的距离，margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的；
padding(内边距):用于控制内容与边框之间的距离；
border(边框):围绕在内边距和内容外的边框；
content(内容):盒子的内容，显示文本和图像。

当指定一个CSS元素的宽度和高度属性时，只需设置内容区域的宽度和高度。

margin:10px 20px 30px 40px --上  右  下  左
margin:10px 20px 30px --上  左右  下
margin:10px 20px -- 上下  左右
margin:10px --上下左右

如果父级div中没有border、padding、inline content，那么子级div的margin会一直向上找，直到找到某个标签包括border、padding、inline content中的其中一个，然后按此div进行margin。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            padding: 10px;
            /*margin: 20px;*/
            margin-top: 20px;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border: 5px solid black;
        }
        .outer{
            height: 400px;
            background-color: aqua;
            border: 1px solid orange;
        }
        .outer2{
            width: 100px;
            height: 100px;
            background-color: chocolate;
        }
        body{
            margin: 0px;
        }
    </style>
</head>
<body>

<div class="outer2"></div>
<div class="outer">
    <div class="div1">hello div1</div>
    <div class="div2">hello div2</div>
</div>

</body>
</html>

内外边距

9.float属性

所谓的文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

只有绝对定位absolute和浮动float才会脱离文档流。

浮动的表现是指浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。

清除浮动：在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动(float为left或right)的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这种现象叫浮动的溢出，可以用CSS清除浮动。

1 clear:none 默认值，允许两边都可以有浮动对象
2 clear:left 不允许左边有浮动对象
3 clear:right 不允许右边有浮动对象
4 clear:both 不允许有浮动对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            border: 1px solid blue;
            width: 300px;
        }
        .div1{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div2{
            background-color: red;
            width: 100px;
            height: 100px;
            float: right;
        }
        .div3{
            background-color: yellow;
            height: 40px;
        }
 

    </style>
</head>
<body>

<div id="id1 clearfix">
    <div class="div1">box1 向左浮动</div>
    <div class="div2">box2 向右浮动</div>
    <div style="clear: both"></div>
</div>
<div class="div3">box3</div>


</body>
</html>

clear

clear属性只对自身起作用，而不会影响其他元素。上面clear实例就是如此，一个元素的左右侧都有浮动对象，并且这个元素设置了不允许有浮动，那么它会自动下移一格，从而达到该元素左右两侧没有浮动对象的目的。

解决方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1{
            border: 1px solid blue;
            width: 300px;
        }
        .div1{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
        .div2{
            background-color: red;
            width: 100px;
            height: 100px;
            float: right;
        }
        .div3{
            background-color: yellow;
            height: 40px;
        }
        #clearfix:after{
            content: ‘‘;
            display: block;
            clear: both;
        }


    </style>
</head>
<body>

<div id="id1 clearfix">
    <div class="div1">box1 向左浮动</div>
    <div class="div2">box2 向右浮动</div>
</div>
<div class="div3">box3</div>


</body>
</html>

View Code

10.positon定位

1 static：默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。
2 relative：相对定位，相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。
3 absolute：绝对定位，元素定位后生成一个块级框，不论原来他在正常流中生成何种类型的框。设置为绝对定位的元素框从文档流完全删除,并相当于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相当于最初的包含块(即boby元素)
4 fixed：对象脱离正常文档流，使用top、right、bottom、left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

最常用的一种情况是我们经常会用一个父级给它设置成一个position:relative，让它做一个相对定位，目的是让它的子元素以它为参照点进行绝对定位。

还有一种定位方式是通过margin属性布局绝对定位元素：此情况，该元素已经脱离文档流，不管它的祖先元素有没有定位，都是以文档流中原来所在位置上偏移参照物。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .div1{
            width: 200px;
            height: 100px;
            background-color: coral;
        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: red;
            /*position: relative;*/
            position: absolute;
            left: 100px;
            top: 100px;

        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .div4{
            width: 200px;
            height: 200px;
            background-color: lawngreen;
        }
        /*.outer{*/
            /*position: relative;*/
        /*}*/
        .outer1{
            background-color: darkorchid;
            height: 200px;
        }
        .returntop{
            width: 80px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: cadetblue;
            color: wheat;
            text-align: center;
            line-height: 50px;
        }
        </style>
</head>
<body>

<div class="outer1"></div>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>

<div style="height: 2000px;background-color: deeppink"></div>
<div class="returntop">返回顶部</div>
</body>
</html>

position定位

CSS

标签：级别视觉允许 add code 优先 fixed orm 单词

原文地址：https://www.cnblogs.com/lzc69/p/11644911.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)

周排行