css笔记-CSDN博客

本文链接：https://blog.csdn.net/weixin_45841729/article/details/117367784

前言

CSS是什么
CSS怎么用(快速入门)
CSS 选择器重点+难点)
美化网页(文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效效果)

一、css简介

1.什么是CSS

Cascading Style Sheet层叠级联样式表。
CSS: 表现(美化网页)。
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

2.发展史

CSS1.0
CSS2.0： DIV(块)+ CSS,HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆角，阴影，动画…浏览器兼容性（3.0集成2.0所有东西）

3.css的优势

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

4.css的三种导入方式

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

行内样式
内部样式

外部样式（两种写法）

链接式（html）:

<link rel="stylesheet" href="style.css"/>

导入式（css2.1特有）:

<style>
  @import url("style.css")
</style>

二、选择器

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

1.基本选择器

标签选择器:选择一类标签。（标签名{}）
类选择器:选择所有class属性一致的标签，跨标签。（.类名{}）
id选择器:全局唯一。（#id名{}）

优先级固定：id选择器>类选择器>标签选择器

2.层次选择器

<body>
    <p>p0</p>
    <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>
    <p>p7</p>
    <p>p8</p>
</body>

后代选择器:在某个元素的后面，祖爷爷、爷爷、爸爸、你

body标签后面的所有都变成红色(p0到p7变红色)
body p{
  background：red;
}

子选择器:只有一代，儿子

body标签后面的第一代所有都变成红色（p012378变红色）
body>p{
  background：red;
}

相邻兄弟选择器:同辈，向下只有一个。

active类标签后面的第一个变成红色(p2变红)
.active+p{
  background:red;
}

通用兄弟选择器:当前选中元素的向下的所有兄弟元素。

active类标签后面的所有同级都变成红色(p2378变红)
.active~p{
  background:red;
}

3.结构伪类选择器(伪类即条件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中ul的第一个子元素li1*/
        ul li:first-child {
            background: red;
        }
        /*选中ul的最后一个子元素li3*/
        ul li:last-child {
            background: #fff200;
        }
        /*选中p1：定位到p的父元素，选择当前的第一个元素
        选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!
        */
        p:nth-child(2) {/*（按顺序选择）如果是nth-child(1)时，是h1标签，则不生效*/
            background: darkblue;
        }
        p:nth-of-type(1){/*（按类型选择）nth-of-type(1)是p标签的第一个*/
            background: aqua;
        }
        /*鼠标移动到这里则改变样式*/
        a:hover{
            background: black;
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <a href="">鼠标移动到这里改变样式</a>
</body>
</html>

4.属性选择器

=x：绝对等于x
*=x：包含x这个元素
^=x：以x这个元素开头的
$=x：以x这个元素结尾的

<!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: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;/*去除下划线*/
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个元素开头的
        $= 以这个元素结尾的
        */
        /*选中存在id属性的元素：a[id]{}*/
        a[id]{
            background: red;
        }
        /*选中id=first的元素：a[id=first]{}*/
        a[id=first]{
            background: gold;
        }
        /*class中有links的元素*/
        a[class*=links]{
            background: #fff200;
        }
        /*选中href中以http开头的元素*/
        a[href^="http"]{
            background: darkblue;
        }
        /*选中href中以pdf结尾的元素*/
        a[href$="pdf"]{
            background: black;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" 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>

二、美化网页元素

1.作用

有效的传递页面信息。
美化网页,页面漂亮,才能吸引用户。
凸显页面的主题。
提高用户的体验。

2.字体样式

font-family：字体（楷体，黑体等等）
font-size：字体大小
font-weight：字体粗细
color：字体颜色

3.文本样式

颜色：color （RGBA：red,green,blue,alpha是透明度）
文本对齐的方式：text-align= center （文本左右居中）
首行缩进：text-indent: 2em （首行缩进两个字符）
行高：line-height （单行文字上下居中：line-height=height）
装饰：text-decoration (划线)
文本和图片水平对齐：vertical-align：middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*首行缩进*/
        .title1{
            color: red;
            text-indent: 2em;
        }
        .p1{
            /*下划线*/
            text-decoration: underline;
        }
        .p2{
            /*中划线*/
            text-decoration: line-through;
        }
        .p3{
            /*上划线*/
            text-decoration: overline;
        }
        /*去除下划线*/
        a{
            text-decoration: none;
        }
        /*图片和文本水平对齐*/
        img,span{
            vertical-align: middle;
        }
        .div1{
            border: 1px solid red;
            border-radius: 10px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;/*行高:行高和高度相同则单行上下居中*/
        }
    </style>
</head>
<body>
    <!--上、中、下划线-->
    <p class="p1">123456</p>
    <p class="p2">123456</p>
    <p class="p3">123456</p>
    <a href="">这是一个链接</a>
    <!--图片和文本水平对齐-->
    <p>
        <img src="image/logo.png">
        <span>我们都一样</span>
    </p>
    <!--首行缩进，红色字体-->
    <p class="title1">当你老了,头白了,睡思昏沉,炉火旁打盹,请取下这部诗歌,慢慢读,回想你过去眼神的柔和,回想它们昔日浓重的阴影;
        多少人爱你青春欢畅的时辰,爱慕你的美丽,假意或者真心,只有一个人爱你那朝圣者的灵魂,爰你衰老了的脸上痛苦的皱纹;
        垂下头来,在红光闪耀的炉子凄然地轻轻诉说那爱情的消逝,在头顶的山上它缓缓踱着步子,在一群星星中间隐藏着脸庞</p>
    <!--行高和高度相同，则单行文字上下居中-->
    <div class="div1">
        1
    </div>
</body>
</html>

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

5.列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        list-style:
        none 去掉圆点
        circle 空心圆
        decimal 数字
        square 正方形
        */
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>java</li>
    <li>C语言</li>
    <li>python</li>
</ul>
</body>
</html>

6.背景图像应用及渐变

地址：https://www.grabient.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid red;
            width: 1000px;
            height: 700px;
            background-image: url("image/logo.png");/*默认是平铺 repeat*/
        }
        .div1{
            background-repeat: repeat-x;/*只x轴平铺*/
        }
        .div2{
            background-repeat: repeat-y;/*只y轴平铺*/
        }
        .div3{
            background-repeat: no-repeat;/*不平铺，原样显示*/
        }
        .div4{
            /*合起来写:颜色，图片，图片位置，平铺方式*/
            background: red url("image/logo.png") 270px 50px no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>

7.盒子模型和边框使用

margin：外边距（上下左右的外边距）

.div1{
  margin：0 0；/*上下，左右*/
}
.div2{
  margin：0 0 0 0；/*上，右，下，左*/
}

padding：内边距（上下左右的内边距）

.div1{
  padding：0 0；/*上下，左右*/
}
.div2{
  padding：0 0 0 0；/*上，右，下，左*/
}

border：边框（粗细，样式，颜色）

.div{
    border: 1px solid red;
}

盒子的计算方式：margin+padding+内容的宽度

8.浮动

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

实现行内元素排列的方式:

display

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

float

<style>
  div{
      float：left;
  }
  span{
      float：right;
  }
</style>

8.父级边框塌陷问题

clear：让元素飘起来但不浮动（浮动起来也可以排成标准文档流）

clear：right；右侧不允许有浮动元素
clear：left；左侧不允许有浮动元素
clear：both；两侧不允许有浮动元素
clear：none；可以浮动

浮动起来可以排成标准文档流，怎样把标准文档流也在父级元素内？

设置父级元素的高度。

<div id="father">
</div>
#father{
 border:1px solid red;
 height:800px;
}

在浮动元素后面增加一个空的div标签，清除浮动。

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

overflow

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

在父类添加一个伪类：after（推荐使用）

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

对比:

display：不用管理父级边框塌陷的问题，但是方向不可控制。
float：浮动起来后会脱离标准文档流，需要解决父类边框塌陷的问题。

9.定位

1.相对定位

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

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

2.绝对定位

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

没有父级元素定位的前提下,相对于浏览器定位。
假设父级元素存在定位（position: relative）,我们通常会相对于父级元素进行偏移。
在父级元素范围内移动。

position:absolute
left:20px;

3.固定定位

定死在页面上不动。比如，返回顶部的功能，定在左下角。

position:fixed;left:20px;

4.z-index和透明度

z-index是图层的概念，默认是0，最高无限999（浮动起来，绝对定位，才会有层的概念）

z-index:0;

背景透明度属性:

background:#000;
opacity:0.5;