CSS

1、什么是CSS

1.1、CSS是什么

Cascading Style Sheet层叠级联样式表

CSS：表现（美化

字体，颜色，边框，高度，宽度，背景图片，网页定位，页面浮动

1.2、发展史

CSS1.0---3.0

1.3、CSS怎么用（快速入门）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    规范style可以写css代码,每一个声明最好用分号结尾
    选择器{
    声明1;
    声明2;
    声明3;}
    <style>
        h1{
            color:red;
        }
    </style>
-->
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

css优势：

1内容和表现分离

2、页面结构表现统一，可以实现复用

3、样式十分丰富

4、利用SEO，容易被搜索引擎收录

1.4、CSS的三种导入方式优先级：就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 内部样式-->
    <style>
        h1{
            color:dodgerblue;
        }
    </style>
<!-- 优先级：就近原则-->
<!-- 外部样式-->
    <link rel="stylesheet" href="style.css">

</head>
<body>


<h1 style="color:red;">hellow</h1>

</body>
</html>

扩展：内部样式两种写法

1链接式：

html

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

2导入式

@import是CSS2.1所特有的

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

2、CSS选择器（重点）

2、选择器

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

2.1基本选择器优先级：id>class>标签

优先级：id>class>标签

1、标签选择器:选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器：会选择到页面所有这个标签的元素*/
        h1{
            color: #401510;
            background: #a8d2d4;
            border-radius: 24px
        }
        p{
            font-size:80px;
        }
    </style>

</head>
<body>
<h1>xuejiava</h1>
<h1>xuejiav2a</h1>
<p>停驾哇塞</p>
</body>
</html>

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

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

    <style>/*类选择器的格式 .class的名称{}
    好处：可以多个标签归类，是同一个class，可以复用
    */
    .aaa{
        color: antiquewhite;
    }
    .bbb{
        color: #401510;
    }

    </style>
</head>
<body>

<h1 class="aaa">老子郑帅</h1>
<h1 class="bbb">老子真帅</h1>
<h1 class="aaa">老子牛逼</h1>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一
        #id名称{}
        优先级：
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        */
        #xiaobai{
            color: dodgerblue;
        }
        .style1{
            color: #a8d2d4;
        }

    </style>
</head>
<body>
<h1 class="style1"> 标题1</h1>
<h1 id="xiaobai"> 标题2</h1>
<h1> 标题4</h1>
<h1> 标题3</h1>
</body>
</html>

2.2、层级选择器

1、后代选择器：在某个元素的后面

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

2、子选择器，一代

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

3、相邻兄弟选择器同辈，不包括自己

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

4、通用兄弟选择器:同辈包括自己

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

2.3、结构伪类选择器

伪类：条

a:hover{
background: yellow;
}

    <style>        /*选中p1：定位到父元素，选择道歉的第一个元素*/        /*选择当前p元素的父级元素选中父级元素的第一个，并且是当前元素才生效！*/        p:nth-child(1){            background: aqua;        }        p:nth-of-type(3){            background: #401510;        }        /*ul的第一关子元素*/        ul li:first-child{            background: aquamarine;        }        /*ul的最后一个子元素*/        ul li:last-child{            background: coral;        }        a:hover{            background: yellow;        }    </style></head><body><a href="">444</a><p>p1</p><p>p2</p><p>p3</p><ul>    <li>p4</li>    <li>p5</li>    <li>p6</li></ul></body>

2.4、属性选择器（常用）

id+class结合

=*=^=

CSS的三种导入方式

3美化网页

3.1、为什么美化网站

1、有效传递页面信息

2、美化网页，吸引用户

3、凸显主题

4、提高用户体验

span标签：重点突出的的字，使用span套起来

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #titel1{            font-size: 60px;        }    </style></head><body>欢迎学习 <span id="titel1">java</span></body></html>

3.2、字体样式

font-family: 字体

font-size:字体大小

font-weight：字体粗细

color：字体颜色

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*font-family: 字体*/        /*font-size:字体大小*/        /*font-weight：字体粗细*/        /*color：字体颜色*/        body{            font-family: Algerian,华文行楷;            color:darkolivegreen;        }        h1{            font-size: 80px;        }        .p1{            font-weight:bolder;        }    </style></head><body><h1>杂交水稻之父袁隆平去世</h1><p>“共和国勋章”获得者、中国工程院院士、国家杂交水稻工程技术研究中心主任、湖南省政协原副主席袁隆平，因多器官功能衰竭，于2021年5月22日13时07分在长沙逝世，享年91岁。</p><p>Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:</p></body></html>

3.3、文本样式

1、颜色 color rgb rgba

2、文本对齐方式 text-align=center

3、首行缩进text-indent:2em;

4、行高line-height:

5、装饰 text-decoration:

6、文本图片水平对齐：vertical-align:middle

超链接去下划线

text-decoration: none;

水平对齐~参照物a ，b
img,span{
vertical-align:middle
}

RGB 0~F
RGBA A：0~1
text-align:center;排版居中
text-indent:2em; 段落首行缩进
height: 50px;
line-height: 50px;
行高和块高度一致，就可以上下居中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><!--    颜色：    单词    RGB 0~F    RGBA A：0~1      text-align:center;排版居中       text-indent:2em; 段落首行缩进         height: 50px;           line-height: 50px;           行高和块高度一致，就可以上下居中       }      -->    <style>       h1{           color:rgb(0,255,250);           text-align:center;       }       .p1{           text-indent:2em;       }       .p3{background: coral;           height: 50px;           line-height: 50px;       }       /*超链接去下划线*/       a{           text-decoration: none;       }       /*水平对齐~参照物a ，b*/       img,span{           vertical-align:middle       }    </style></head><body><a href="">1111</a><a href="">2222</a><a href="">3333</a><h1>杂交水稻之父袁隆平去世</h1><p><img src="image/v2-3add84ffc4e6a04b1cfb278b5ce35f75_b.jpeg" height="400"width="400" alt="">    <span>永远怀念</span></p><p class="p1">“共和国勋章”获得者、中国工程院院士、国家杂交水稻工程技术研究中心主任、湖南省政协原副主席袁隆平，因多器官功能衰竭，于2021年5月22日13时07分在长沙逝世，享年91岁。</p><p class="p3">Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:</p></body></html>

3.4、阴影

   /*阴影text-shadow    颜色，下飘，左飘，半径*/  #price{	text-shadow:greenyellow 10px 10px 2px;    }<!--      向左移 向下移 周围模糊程度-->box-shadow: 1px 1px 10px red;

3.5、超链接伪类

正常情况下a，a:hover

   a {/*默认颜色*/        text-decoration: none;        color: coral;    }    /*鼠标悬停*/    a:hover{        color:aquamarine;        font-size:50px;/*字体大小*/    }

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>    a {        text-decoration: none;        color: coral;    }    /*鼠标悬停*/    a:hover{        color:aquamarine;        font-size:50px;/*字体大小*/    }    /*鼠标按住*/    a:active{        color:green;    }    /*鼠标后的结果*/    a:visited{        color:red;    }    /*阴影text-shadow    颜色，下飘，左飘，半径*/    #price{        text-shadow:greenyellow 10px 10px 2px;    }    </style></head><body><img src="image/a.jpg" alt=""><br><a href="">码出高效：Java开发手册</a><br><a href="">作者: 杨冠宝 / 高海慧</a><br><a href="" id="price">定价: 99.00元</a></body></html>

3.6、列表

list-style:
none;去掉原点
circle 空心园
decimal 有序列表
square 正方形

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>列表样式</title>    <style>        #nav{            width:300px;            background:#a0a0a0;        }        .title{            font-size:18px;            font-weight: bold;            text-indent: 1em;            line-height: 35px;            background: red;        }        /*    list-style:                none;去掉原点                circle 空心园                decimal 有序列表                square 正方形                */        /*ul{*/        /*    background: grey;*/        /*}*/        ul li{            height:30px;            list-style: none;            text-indent: 1em;        }        a{            text-decoration:none;            font-size:14px;            color:#000;        }        a:hover {            text-decoration: none;            text-decoration:underline;        }    </style></head><body><div id="nav">    <h2 class="title">全部商品分类</h2>    <u1>        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>        <li><a href="#">家电</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>        <li><a href="#">服装鞋帽</a>&nbsp;&nbsp;<a href="#">个护肤品</a></li>        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a><a href="#">票务</a></li>    </u1></div></body></html>

3.7、背景background

背景颜色

背景图片

/*颜色，图片，图片位置，平铺方式*/background:red url("images/2.jpg") no-repeat;repeat	默认。背景图像将在垂直方向和水平方向重复。repeat-x	背景图像将在水平方向重复。repeat-y	背景图像将在垂直方向重复。no-repeat	背景图像将仅显示一次。inherit	规定应该从父元素继承 background-repeat 属性的设置。

<style>    div{        width:1000px;        height:700px;        border: 1px solid red;        background-image:url("images/2.jpg");    }    .div1{        background-repeat: repeat-x;    }    .div2{        background-repeat: repeat-y;    }    .div3{        background-repeat:no-repeat;    }</style>

3.8、渐变

网站https://www.grabient.com/

background-color: #4158D0;background-image: linear-gradient(353deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4、盒子模型

4.1、什么是盒子

margin:外边距

padding：内边距

border:边框

4.2、边框

4.3、内外边距

盒子计算方式：margin+border+padding+内容

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #box {            width: 300px;            /*边框*/            border: 1px solid red;            /*居中*/            margin: 0 auto;        }            h2{                font-size: 16px;                background-color: #3cbda6;                /*行高*/                line-height:30px;                color:white;            }            form{                background: #a8d2d4;            }            input{                border: 1px solid black;            }            div:nth-of-type(1){                pandding:10px;            }    </style></head><body><div id="box">    <h2>会员登入</h2>    <form action="#">        <div>            <span>用户名：</span>            <input type="text">        </div>        <div>            <span>密码：</span>            <input type="text">        </div>        <div>            <span>邮箱；</span>            <input type="text">        </div>    </form></div></body></html>

4.4、圆角边框border-radius

<style>div{    width:100px;    height:100px;    border:10px solid red;    border-radius:100px;}</style>

4.5、盒子阴影

5.浮动

5.1、标准文档流

块级元素：独占一行

行内元素：不独占一行

行内元素可以被包含在块级元素中，反之不可以

5.2、display

flex-grow

display: flex弹性盒子

block,块元素
inline 行内元素
inline-block 块元素，但是可以内联在一行！
none

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

1.这个也是一种实现行内元素排列的方式，但是很多时候都用float

5.3、float

1、左右浮动 float：XX

5.4、父级边框塌陷问题

clear

clear:right;右侧不允许有浮动clear:left;左侧不允许有浮动clear:both;两侧不允许有浮动clear:none;不允许有浮动

解决方案

1、增加父级元素的高度

#father{border:1px #100 solid;height:800px;}

2、增加一个空的div标签，清除浮动

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

3、overflow

hidden隐藏

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

4、父类添加一个伪类：after

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

小结：

1.浮动元素后面加div

简单，代码中尽量避免空div

2.设置父级元素的高度

简单，元素加色有了固定高度，就会被限制

3.overflow

简单，下拉的一些场景避免使用

4.父类中加一个伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用！

6、定位

6.1、相对定位relative

相对定位:position:relative;

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            margin: 50px;        }        #father{            border:1px solid #3cbda6;            padding: 0;        }        #first{            background-color:bisque;            border:greenyellow;            position: relative;            top:-20px;        }        #second{            background-color:bisque;            border:greenyellow;            position: relative;            top:-20px;        }    </style></head><body><div id="father">    <div id="first">第一个盒子</div>    <div id="second">第二个盒子</div>    <div id="third">第三个盒子</div></div></body></html>

练习

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #box{            width:300px;            height:300px;            padding:10px;            border:2px solid red;        }        a{width:100px;            height: 100px;            text-decoration:none;            background: #b619db;            line-height:100px;            text-align:center;            color:white;            display:block;        }        a:hover{            background: #4158D0;        }        .a2,.a4{            position:relative;            left:200px;            top:-100px;        }        .a5{            position: relative;            left:100px;            top:-300px;        }    </style></head><body><div id="box">    <a href=""class="a1">链接1</a>    <a href=""class="a2">链接2</a>    <a href=""class="a3">链接3</a>    <a href=""class="a4">链接4</a>    <a href=""class="a5">链接5</a></div></body></html>

6.2、绝对定位absolute

position:absolute

定位：基于XXX定位，上下左右

1、没有父级元素定位的前提，根据游览器定位

2、假设父级元素存在定位，我们通常回相对父级元素进行偏移

3、在父级元素方位内移动

相对于父级或游览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留

6.3、固定定位fixed

position:fixed

6.3、z-index 设置层级

z-index:默认是0，最高无限

z-index：0；

背景透明度

opacity:0.5;

7、网页动画（特效效果

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

将所有属性0.3s的过渡:transition: all .3s;

用transform将元素居中：transform: translate(-50%,-50%);

设置垂直位移一半，并旋转45度：transform:translateY(-50%)rotate(45deg);

设置盒子始终为100%：box-sizing:border-box;盒子大小

设置边框重叠：border-collapse:collapse;

缩放： transform:scale(0.65);

posted @ 2021-11-13 13:37 就叫树莓吧。阅读(99) 评论(0) 收藏举报

刷新页面返回顶部

就叫树莓吧。

CSS