CSS基础知识

action
176 阅读8分钟

1. 什么是CSS

CSS (Cascading Style Sheet 层叠级联样式表)

CSS：美化网页、字体、颜色、高度、宽度、背景颜色、浮动、定位

<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>

  • css优势
  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，容易被搜索引擎收录
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
​
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
​
<!--优先级：就近原则-->
​
<!--行内样式：在标签元素中编写style属性-->
<h1 style="color: red;"></h1>
​
</body>
</html>

拓展：外部样式两种写法

  • 链接式

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

  • 导入方式

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

2. 选择器

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

2.1 基本选择器

  1. 标签选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素,选择一类标签*/
        h1{
            color: red;
        }
        p{
            font-size:90px;
        }
    </style>
​
</head>
<body>
​
<h1>lesson</h1>
<p>lesson22.</p>
</body>
</html>
  1. 类选择器class
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        <!--类选择器的格式，.class的名称{}
        好处：可以多个标签归类，相当于同一个class，可以复用
        选择所有class属性一致的标签，跨标签
        .类型{}
        -->
        .class1{
            color: #3748ff;
        }
        .class2{
            color: #963b3d;
        }
    </style>
​
</head>
<body>
​
<h1 class="class1">标题1</h1>
<h1 class="class2">标题2</h1>
<h1>标题3</h1>
​
</body>
</html>
  1. Id选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        /*id选择器,id保证全局唯一
            #id名称{}
            优先级：
            不遵循就近原则，固定的
            id选择器 > 类选择器 > 标签选择器
        */
        #h1{
            color: #b32e84;
        }
    </style>
​
</head>
<body>
​
<h1 id="h1">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
​
</body>
</html>

优先级：id > class > 标签

2.2 层次选择器

  1. 后代选择器：在某个元素的后面
/*后代选择器*/
body p{
    background: #42a91b;
}
  1. 子选择器
/*子选择器*/
body>p{
    background: #42a91b;
}
  1. 相邻兄弟选择器
/*相邻兄弟选择器，只有一个，相邻(向下)*/
.active+p{
    background: #42a91b;
}
  1. 通用选择器
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #42a91b;
}

2.3 结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
ul li:first-child{
    background: #42a91b;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: #b3423e;
}

/*选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素生效
按照顺序选择
*/
p:nth-child(1){
    background: #963b3d;
}
/*
选中父元素下的p元素的第二个，按照类型选择
 */
p:nth-of-type(2){
    background: yellow;
}
        
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<p></p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>

<img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200804100624966.png" alt="image-20200804100624966" style="zoom:200%;" />

2.4 属性选择器

相当于 id class的结合

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 100px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*  属性名，属性名=属性值（）
        =  绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾

        存在id属性的元素
          a[写属性的东西]{}
          */
        a[id]{
            background: yellow;
        }
        /*id=first的元素*/
        a[id=first]{
            background: red;
        }
        /*class中有links的元素*/
        a[class*="links"]{
            background: palevioletred;
        }
        /*选中href中以http开头的元素*/
        a[href^=http]{
            background: #4fa982;
        }
        /**/
        a[href$=doc]{
            background: aqua;
        }
    </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="http://images/124.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="image/123.jpg" class="links item">5</a>
    <a href="aaa" class="links item">6</a>
    <a href="abc" class="links item">7</a>
    <a href="/a.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>

3.美化网页

3.1 为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页，页面漂亮，才能吸引用户
  3. 凸显页面主题
  4. 提高用户的体验
  • span标签
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

<span id="title1">欢迎学习java</span>

</body>
</html>

3.2 字体样式

font-family  :字体
font-size    :字体大小
font-weight  :字体粗细
color        :字体颜色

body{
    font-family: 楷体;
    color: #b3423e;
}
h1{
    font-size: 50px;
}
.p1{
    font-weight: bolder;
}

3.3 文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐方式 text-align=center
  3. 首行缩进 text-indent = 2em
  4. 行高 line-height 单行文字上下居中：line-height=height
  5. 文本图片水平对齐：vertical-align:middle
text-align: 排版，居中，
text-indent: 2em;   首行缩进两个字符
text-decoration: underline;  下划线
text-decoration: line-through;  中划线
text-decoration: overline;  上划线
    height: 300px;
    line-height: 300px;
    行高和块的高度一致，就可以上下居中

h1{
    color: #FF0000;
    text-align: center;
}
/*下划线*/
.p1{
    /*首行缩进*/
    text-indent: 2em;
    text-decoration: underline;
}
/*中划线*/
.p2{
    background: blue;
    height: 300px;
    line-height: 300px;
    text-decoration: line-through;
}
/*上划线*/
.p3{
    text-decoration: overline;
}

3.4 阴影

/*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow:5px -5px 5px blue;
}

3.5 超链接伪类

正常情况下，a，a：hover

/*鼠标悬浮的状态*/
a:hover {
    color: orange;
}
/*鼠标按住未释放的状态*/
a:active{
    color: green;
}

3.6 列表

/*ul li*/
/*
list-style:
    none  去掉圆点，去掉数字
    circle 空心圆
    decimal 数字
    square 正方形
*/
ul{
    background: #b9d1fc;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
}

3.7 背景

/*颜色，图片，位置，平铺方式*/
background: red url("//") 270px 10px no-repeat;

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

    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/book.jpg");
            /*默认是全部平铺的*/
        }
        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        .div2{
            /*垂直平铺*/
            background-repeat:repeat-y;
        }
        .div3{
            /*不平铺 默认*/
            background-repeat: no-repeat;
        }
    </style>
    
</head>
<body>

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

</body>
</html>

3.8 渐变

<!--渐变：镜像渐变，圆形渐变-->
    background: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);

4.盒子模型

4.1 什么是盒子？

  • margin：外边距
  • padding：内边距
  • border；边框

4.2 边框

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

    <style>
        body{
            /*body总有一个默认的外边距 margin：0*/
            margin: 0;
        }
        /*border; 粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }

        h2{
            font-size: 16px;
            background-color: #21D4FD;
            line-height: 30px;
            margin: 0;
        }

        form{
            background:green;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:3px dashed black;
        }
        div:nth-of-type(3) input{
            border:2px dashed red;
        }
    </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.3 内外边距

/*外边距 水平居中*/
margin: 0 auto;
/*内边距*/
padding:0;

盒子模型的计算：margin+border+padding+内容宽度

4.4 圆角边框

<!--
	左上 右上 右下 左下，顺时针方向

	圆圈： 圆角 = 半径
-->
border-radius: 100px;

4.5 阴影

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

5.浮动

5.1 block

块级元素：独占一行

h1~h6  p标签  div  列表...

行内元素：不独占一行

span   a  img strong ...

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

5.2 display

是一种实现行内元素排列方式，但是很多时候使用float

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

    <style>

        /*
        block块元素
        inline 行内元素
        inline-block 是块元素，但是可以在一行，内联
        none 消失
        */

        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

5.3 float

  1. 左右浮动 float：left right

5.4 父级边框塌陷问题

clear

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

解决方案：

  1. 增加父级元素的高度
#father{
	border:1px #000 solid;
	height:800px;
}
  1. 增加一个空的div标签，清除浮动
<div class = "clear"></div>

.clear{
	clear:both;
	margin:0;
	padding:0;
}

  1. overflow

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

  2. 父类添加一个伪类：after

    避免添加一个div标签

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

总结：

  1. 浮动元素后面增加一个空div标签

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

  2. 设置父元素的高度

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

  3. overflow

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

  4. 在父类添加伪类，after 推荐使用

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

6.定位

6.1 相对定位

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

    <!--相对定位-->
    <!--相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
        }
        #first{
            background-color: #fcf992;
            border: 1px dashed green;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #f09afc;
            border: 1px dashed blue;
        }
        #third{
            background-color: #87fcef;
            border: 1px dashed orange;
            position: relative;
            bottom: -20px;
            left: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位：position:relative;

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

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

6.2 绝对定位

position：absolute；

定位：基于某个东西定位，上下左右

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

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

在父级范围内移动

相对于父级或者浏览器的位置，进行指定的偏移，它不再标准文档流动中，原来的位置不会保留

6.3 固定定位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

6.4 z-index

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="book.jpg" alt=""></li>
        <li class="tipText">你好你好你好，你好</li>
        <li class="tipBg"></li>
        <li>时间2020-01-01</li>
        <li>地点：太阳上</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 500px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 500px;
    height: 25px;
    top: 400px;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: #000;
    opacity: 0.5;/*背景透明度*/
}

本章知识点学习自

avatar
文章
阅读
粉丝