css学习

1、什么是CSS

如何学习

  1. CSS是什么
  2. CSS怎么用
  3. CSS选择器（重点，难点）
  4. 美化网页（文字，阴影，超链接，列表，界面。。。。）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效）

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化页面）

字体，颜色，边距，高度，宽度，图片

1.3、快速入门

练习格式：

image-20210804155747788

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范 <style> 中可以编写css的代码，每一个声明最好使用分好结尾
    语法：
        选择器{
            声明1；
            声明2；
            声明3；
        }
    
    
    -->
    <style>
        h1{
            color: red;
        }

    </style>


</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用这种规范

image-20210804161947512

css的优势

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

1.4、css四种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

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


</head>
<body>
<!--优先级：覆盖原则-->
<!--行内样式：在标签中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

2、选择器

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

2.1、基本选择器

1.标签选择器：选择一类标签 标签{}

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

    <style>
        <!--标签选择器会选择页面上所有的这个标签-->
        h1{
            color: red;
        }

        p{
            color: green;
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>学Java</h1>
<h1>学Java</h1>
<p>听课</p>

</body>
</html>

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

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

    <style>
        /*类选择器的格式： .class的名称{}
        好处：可以多个标签归类，是同一个class


        */
        .yt{
            color: #4db331;
        }
        .you{
            color: #a63037;
        }

    </style>


</head>
<body>

<h1 class="yt">标题1</h1>
<h1 class="you">标题2</h1>
<h1 class="you">标题3</h1>

<p class="you">段落</p>

</body>
</html>

3.ID选择器：全局唯一，不能重复 #id名{}

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

    <style>
        /*id选择器, id必须保证全局唯一!
        #id名称{}

        几个选择器中不遵循就近原则，固定的
        优先级：id选择器> class选择器 > 标签选择器
        */
        #yt{
            color: red;
        }
    </style>

</head>
<body>

<h1 id="yt">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>

</body>
</html>

几个选择器中不遵循就近原则，固定的
优先级：id选择器> class选择器 > 标签选择器

2.2、层次选择器

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

 <style>
        /*后代选择器 空格*/
        body p{
            background-color: #a63037;
            color: #59ca28;
        }

    </style>

2.子选择器, 一代 儿子

/*子选择器 大于符号*/
        body>p{
            background-color: yellow;
        }

3.相邻兄弟选择器 同辈

/*相邻兄弟选择器 ：只有一个，向下 加号*/
        .active + p{
            background-color: blue;
        }

4.通用选择器

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/        .active~p{            background-color: chartreuse;        }

2.3、结构伪类选择器

伪类：

/*ul的第一个子元素 */        ul li:first-child{            background-color: #a63037;        }      /*ul的最后一个子元素 */        ul li:last-child{            background-color: #4db331;        }

2.4、属性选择器（常用）

id + class结合

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .demo a{            float: left;            display: block;            height: 50px;            width: 50px;            border-radius: 30px;            background: #4db331;            text-align:center;            color: gray;            text-decoration: none;            margin-left: 5px;            font:bold 20px/50px Arial;        }        /*属性名 或者 属性名=属性值（正则）        = 绝对等于        *= 包含这个元素        ^= 以这个元素开始        $= 以这个结尾        */        /*存在id属性的元素  a[属性]{}*/        /*        a[id]{            background: yellow;        }        a[title]{            background: red;        }        */        /*class 中有links的元素*/        a[class *="links"]{            background: blue;        }        /*选中href中以http开头的元素*/        a[href^=http]{            background: yellow;        }        a[href $= pdf]{            background:red;        }    </style></head><body><p class="demo">    <a href="http://www.baidu.com" class="links item first" id="first">1</a>    <a href="" class="links item active" target="_blank" title="test">2</a>    <a href="images/123.html" class="links item">3</a>    <a href="images/123.png" class="links item">4</a>    <a href="images/123.jpg" class="links item">5</a>    <a href="abc" class="links item">6</a>    <a href="/a.pdf" class="links item">7</a>    <a href="/abc.pdf" class="links item">8</a>    <a href="abc.doc" class="links item">9</a>    <a href="abcd.doc" class="links item last">10</a></p></body></html>

image-20210805100339979

= 绝对等于*= 包含这个元素^= 以这个元素开始$= 以这个结尾

3、美化网页元素

3.1、 为什么要美化网页

1、有效的传递信息

2、页面漂亮，吸引客户

3、凸显主题

4、提高用户体验

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

3.2、字体样式

<head>    <meta charset="UTF-8">    <title>Title</title>    <!--    font-family：字体    font-size:字体大小    font-weight: 字体粗细    color:字体的颜色    -->    <style>        body{            font-family: 楷体;            color: #4db331;            text-align: center;        }        h1{            font-size: 50px;        }        .p1{            font-weight: bold;        }    </style></head>

3.3、文本样式

1、颜色 color rgb rgba

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

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

4、行高 line-height

5、装饰 text-decoration

6、文本图片对齐 vertical-align

3.4、文本阴影和超链接伪类

<style>        /*默认的颜色*/        a{            text-decoration: none;            color: black;        }        /*鼠标悬浮的状态*/        a:hover{            color: #59ca28;        }        /*鼠标按住未释放的状态*/        a:active{            color: red;        }        #price{            text-shadow: #59ca28 10px 10px 10px;        }    </style>

正常情况下，基本上只使用：

a:hover{            color: #59ca28;        }

3.5、列表

list-style:

​ none 去掉原点

​ circle 空心原点

​ decimal 数字

3.6、背景

背景图片

<style>        div{            width: 1000px;            height: 700px;            border: 1px solid red;            background-image: url("images/a.PNG");//默认全部是平铺的        }        .div1{            background-repeat: repeat-x;        }        .div2{             background-repeat: repeat-y;         }        .div3{             background-repeat: no-repeat;         }    </style>

4、盒子模型

4.1、 什么是盒子模型

image-20210805204119442

margin: 外边距

padding：内边距

border: 边框

4.2、边框

<style>        body{            /*body 总有一个默认的外边距margin*/            margin: 0px;        }        /*border: 粗细，样式，颜色*/        #box{            width: 300px;            height: 150px;            border: 1px solid red;        }        form{            background: gray;        }        div:nth-of-type(1) input{            border: 3px solid black;        }    </style>

border: 3px solid black;

实线：solid

虚线：dashed

4.3、内外边距

外边距的妙用：居中

margin: 0 auto;

上下左右

4.4、圆角边框

border-radius:10px;

4.5、盒子阴影

box-shadow: 10px 10px 1px

5、浮动

5.1、标准文档流：

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

块级元素：独占一行

h1~h6 p div 列表、、、、、

行内元素：不独占一行

span a img .....

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

5.2、display

display:block;

block 块元素

inline 行内元素

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

none:消失

5.3、float

1、左右浮动 float

float:right;

float:left;

5.4、父级边框塌陷问题

clear:right; 右侧不允许有浮动元素

clear: left; 左侧不允许有浮动元素

clear: both; 两侧不允许有浮动元素

clear: none;

解决方案

1、增加父级元素高度

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

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

3、overflow

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

overflow: scroll;//产生滚动条

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

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

小结：

1.浮动元素后面增加div

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

2.设置父元素的高度

​ 简单，元素假设有了固定的高度，就会被限制

3.overflow

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

4.父类增加一个伪类：after

​ 推荐使用，但写法复杂

5.5、对比

  • diplay

    方向不可以控制

  • float

    浮动起来会脱离标准文档流

6、定位

6.1、相对定位

position: relative;

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

上左下右

top left bottom right

6.2、绝对定位

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

1、没有父类元素定位的前提下，相对于浏览器定位

2、如果父类元素存在，通常相对于父类元素偏移

不在原来的位置

6.3、固定定位

position: fixed

6.4、z-index

图层

默认是0，最高无限

opacity:0.5 ; 设置透明度

7、动画

posted @ 2021-08-06 21:37  半路_出家ren  阅读(71)  评论(0)  编辑  收藏  举报
返回顶端