Web前端-CSS

------------恢复内容开始------------

CSS

一.CSS的优势

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

1 <!--导入CSS文件-->
2 <link rel="stylesheet" href="style.css">

二.三种导入方式

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

三.选择器

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

一.基本选择器：

标签选择器
类选择器
id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器会选择到页面上的所有该标签的元素；格式：标签{}*/
        h1{
        color:green;
        }
        /*类选择器，可以复用；格式：.类名{}*/
        .stduy{
        color:yellow;
        }
        /*id选择器，id必须唯一，不可复用；格式：#id名{}*/
        #hh{
        color:red;
        }
    </style>
</head>
<!--优先级:不遵循就近原则，id选择器>类选择器>标签选择器-->
<body>
<h1 class="stduy">学习</h1>
<h1 id="hh">学习</h1>
<h1>学习</h1>
</body>
</html>

二.层次选择器

后代选择器：当前选中元素下层及下下层等的所有元素
子选择器：当前选中元素下层的元素
相邻兄弟选择器：当前选中元素相邻的元素（只有一个，下一个）
通用兄弟选择器：当先选中元素的所有相邻元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        body p{
        background:green;
        }
        /*子选择器*/
        body>p{
        background:red;
        }
        /*相邻兄弟选择器*/
        .active+p{
        background:yellow;
        }
        /*通用选择器*/
        .active~p{
        background:black;
        }
    </style>
</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>
</ul>
</body>
</html>

三.结构伪类选择器

<style>
        /*伪类选择器*/
        /*ul的第一个子元素*/
        ul li:first-child{
        background:green;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
        background:red;
        }
</style>

四.属性选择器

格式：标签[属性名]{}；标签[属性名=属性值]{}；属性值可用正则匹配；=表示绝对等于；*=表示包含；^=以什么开头；%￥=以什么结尾

四.美化网页元素

一.字体样式

<!--font-family：字体
    font-size:字体大小
    font-weight：字体粗细
    color:字体颜色
-->
    <style>
        body{
        font-family:楷体;
        font-size:50px;
        font-weight:bold;
        color:green;
        }
    </style>

二.文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--color:颜色，可用单词，rgb，rgba；
    text-align:排版
    text-indent:首行缩进
    line-height:行高
    -->
    <style>
        h1{
        color:rgba(0,255,255,0.9);
        text-align:center
        }
        p{
        text-indent:2em;
        line-height:40px;
        }
        /*下划线*/
        .l1{
        text-decoration:underline;
        }
        /*中划线*/
        .l2{
        text-decoration:line-through;
        }
        /*上划线*/
        .l3{
        text-decoration:overline;
        }
        /*超链接去下划线*/
        a{
        text-decoration:none;
        }
    </style>
</head>
<body>
<p class="l1">213</p>
<p class="l2">213</p>
<p class="l3">213</p>
<h1>南山南</h1>
<p>你在南方的艳阳里
    大雪纷飞
    我在北方的寒夜里
    四季如春
    如果天黑之前来得及
    我要忘了你的眼睛
    穷极一生
    做不完一场梦
    他不再和谁谈论相逢的孤岛
    因为心里早已荒无人烟
    他的心里再装不下一个家
</p>
<p> 做一个只对自己说谎的哑巴
    他说你任何为人称道的美丽
    不及他第一次遇见你
    时光苟延残喘
    无可奈何
    如果所有土地连在一起
    走上一生
    只为拥抱你
    喝醉了他的梦
    晚安
    你在南方的艳阳里大雪纷飞
    我在北方的寒夜里四季如春
    如果天黑之前来得及
    我要忘了你的眼睛
    穷极一生做不完一场梦
    大梦初醒 荒唐了一生
</p>
</body>
</html>

三.文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
        text-decoration:none;
        color:black;
        }
        /*鼠标悬停状态*/
        a:hover{
          color:green;
          font-size:100px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
        color:yellow;
        }
        /*text-shadow:水平偏移，垂直偏移，阴影半径，阴影颜色*/
        #name{
          text-shadow:5px 5px 5px red;
        }
    </style>
</head>
<body>
<a href="#"><img src="../images/ycy.jpg"></a>
<p id="name"><a href="#">杨超越</a></p>
<p><a href="#"> 超越妹妹</a></p>
</body>
</html>

四.列表

<!--list-style:none;去掉圆点
    list-style:circle； 空心圆
-->
    <style>
        ul li{
        list-style:circle;
        }
    </style>

五.背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
        width:1000px;
        height:1000px;
        border:1px solid red;
        background-image:url("../images/ycy.jpg");
        background-repeat:repeat-x;/*水平平铺*/
        background-repeat:repeat-y;/*垂直平铺*/
        background-repeat:no-repeat;/*不平铺*/
        background-position:100px 100px;/*定位*/
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

渐变

background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);

五.盒子模型

margin：外边距

border：边框

padding：内边距

一.边框

<!--border:粗细，样式：(solid实线，dashed虚线)，颜色-->
<style>
    #box{
    width:200px;
    border:1px dashed red;
}
</style>

二.内外边距

外边距居中：margin:0 auto;

三.圆角边框

<!--画圆：圆角=宽度的一半-->
<style>
        div{
        width:100px;
        height:100px;
        border:10px solid red;
        border-radius:50px;
        }
 </style>

阴影

box-shadow:10px 10px 10px yellow;

四.display和浮动

<!--display:block块元素
    display:inline行内元素
    display:inline-block是块元素但是可以内联在一行
 -->
    <style>
        div{
        width:100px;
        height:100px;
        border:10px solid red;
        display:inline-block;
        }
         span{
        width:100px;
        height:100px;
        border:10px solid red;
        display:inline-block;
        }
    </style>

float：left左浮动；float：right右浮动

父级元素塌陷解决

增加父级元素的高度
增加一个空的div，清除浮动

<div class="clear"></div>
.clear{
        clear:both;
        margin:0;
        padding:0;
}

overflow:给父级元素增加overflow属性：overflow:hidden;
给父类添加一个伪类

 #father:after{
    content:'';
    dispplay:block;
    clear:both;
    }

display vs float

display：方向不可控制
float：父级元素会塌陷

六.定位

1).相对定位

相对原来的位置进行指定的偏移，相对定位始终处在标准文档流中，原来的位置会被保留；

position:relative;
top:-20px;
left:20px;
right:20px;
bottom:-10px;

2).绝对定位

基于XXX定位

在没有父级元素定位的前提下，相对于浏览器定位
若父级元素存在定位，则相对于父级元素定位

绝对定位不在标准文档流中，原来的位置不会被保留

#father{
        position:relative;
}
#second{
        border:1px solid green;
        background:red;
        position:absolute;
        right:30px;
}

3)固定定位

position:fixed

4)z-index和透明度

z-index：1；层级，默认是0，最高无限

opacitya：0.5；透明度

------------恢复内容结束------------