CSS基础

2021-09-24 04:45:02

1、什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

2、CSS发展史

1. CSS1.0

19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。

2. CSS2.0（添加div等）

1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。

3. CSS2.1（添加了浮动，定位等）

2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。

4. CSS3（添加了圆角，阴影，动画等）

早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。

3、基础语法和注释

CSS 样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个 CSS属性和属性值。

div {
	background-color: blue;
    color: rebeccapurple;
    font-family: "agency fb";
}

/* 这里就是注释 */

css声明要以分号;结束，声明以{}括起来
建议一行书写一个属性
若值为若干单词，则要给值加引号，如 font-family: "agency fb";

4、CSS的使用

1.行内式

行内样式将样式定义在具体html元素的style属性中。行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。

<p style="color:red;font-size:50px;">这是一段文本</p>

2.嵌入式

嵌入式通过在html页面内容开辟一段属于css的代码区域，通常做法为在< head>标签中嵌套

<style>
    h1{
        color: red;
    }
</style>

3.引用式

在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达至更好的重用效果。

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

注意：CSS的优先级为就近原则

5、选择器

5.1、基本选择器

通用选择器

选择所有 *

* {
    ......
}

元素选择器

选择指定标签

元素名称 {
    ......
}

id选择器

选择设置过指定id属性值的元素 #

#id属性值 {
    ......
}

类选择器

选择设置过指定class属性值的元素

.class属性值 {
    ......
}

分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

选择器1,选择器2, ...{
    ......
}

CSS样式的优先级，是根据选择器的权重来决定的，常见的权重如下，权重越大，优先级越高

通用选择器：0
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000

5.2、组合选择器

CSS组合选择器说明了两个选择器直接的关系，有如下四种组合方式：
- 后代选取器(以空格分隔)
- 子代选择器(以大于号分隔）
- 相邻兄弟选择器（以加号分隔）
- 普通兄弟选择器（以波浪线分隔）

后代选择器

用于选择指定元素后的所有元素（要在指定标签内部），以空格分隔

选择器1 选择器2 {
    ......
}

子代选择器

用于选择指定标签元素的所有同级第一代子元素（要在指定标签内部），以大于号分隔

选择器1 > 选择器2 {
    ......
}

相邻兄弟选择器

可选择紧接在所选元素后的同级元素，以加号分隔

选择器1 + 选择器2 {
    ......
}

普通兄弟选择器

选择紧接在所选元素后的所有同级元素，以波浪线分隔

选择器1 ~ 选择器2 {
    ......
}

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /* 后代选择器 */
        .food li {
            color: red;
        }

        /* 子代选择器 */
        .food > li {
            color: blue;
        }

        /* 相邻兄弟选择器 */
        .d + p {
            color: blueviolet;
        }

        /* 普通兄弟选择器 */
        #l ~ li {
            color: forestgreen;
        }


    </style>
</head>
<body>
<h3>食物</h3>
<ul class="food">
    <li>水果</li>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>

    <li>蔬菜</li>
    <ul>
        <li>黄瓜</li>
        <li>花菜</li>
        <li>白菜</li>
    </ul>

</ul>

<p>相邻兄弟选择器1</p>
<div class="d">
    <p>相邻兄弟选择器2</p>
</div>
<div>
    <p>相邻兄弟选择器3</p>
</div>
<div class="d">
    <p>相邻兄弟选择器4</p>
</div>
<p>相邻兄弟选择器5</p>



<div>
    普通兄弟选择器
    <ul>
        <li>java</li>
        <li id="l">html</li>
        <li>css</li>
        <li>js</li>

        <ul>
            <li>linux</li>
            <li>c++</li>
        </ul>
    </ul>

</div>


</body>
</html>

效果：

5.3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* ul的第一个子元素 */
        ul li:first-child {
            background-color: red;
        }

        /* ul的最后一个子元素 */
        ul li:last-child {
            background-color: blue;
        }

        /*
            选择当前p元素的父元素的第一个子元素，并且是当前元素才生效
        */
        p:nth-child(1) {
            background-color: chartreuse;
        }

        /* 选中当前p元素的父元素下的第二个p元素，并且是当前元素才生效 */
        p:nth-of-type(2) {
            background-color: #9648ff;
        }


    </style>

</head>
<body>

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


</body>
</html>

效果：

5.4、属性选择器

属性
属性和值
属性和多值

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            display: inline-block;
            width: 50px;
            height: 50px;
            border-radius: 5px;
            background-color: #45ff64;
            text-decoration: none;
            line-height: 50px;
            text-align: center;
        }
        /* 选择有id属性的a标签 */
        /*a[id]{*/
        /*    background-color: yellow;*/
        /*}*/

        /* 选择id属性值为first的a标签 */
        /*a[id="first"]{*/
        /*    background-color: yellow;*/
        /*}*/

        /* 选择class属性值含有link的a标签,只要能截取出link这个词就行 */
        /*a[class *= "link"]{*/
        /*    background-color: yellow;*/
        /*}*/

        /* 选择class属性值含有独立的单词link的a标签 */
        /*a[class ~= "link"]{*/
        /*    background-color: yellow;*/
        /*}*/

        /* 选择href属性值以http开头的a标签 */
        /*a[href ^= "http"]{*/
        /*    background-color: yellow;*/
        /*}*/

        /* 选择href属性值以http独立唯一单词开头的a标签 */
        /*a[href |= "http"]{*/
        /*    background-color: yellow;*/
        /*}*/


        /* 选择href属性值以com结尾的a标签 */
        a[href$="com"]{
            background-color: yellow;
        }



    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" title="百度链接" class="first link" id="first">1</a>
    <a href="https://www.jingdong.com" class="link link" >2</a>
    <a href="ab.doc" class="link item" target="_blank" >3</a>
    <a href="xxx.pdf" class="llllllllllinnkkkkk" >4</a>
    <a href="http" class="linkitem" >5</a>
    <a href="http http" class="link end" >6</a>

</p>


</body>
</html>

效果：

6、美化页面

原因：

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

6.1、字体样式

font-family

文本字体，该属性设置文本的字体。 font-family属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体，所以尽量将不常见的字体靠前，将最常见的字体放置在最后，作为替补。

注意：

1）只有当字体名中含有空格或#、$之类的符号时（如 New York），才需要在font-family声明中加引号：

body {
    font-family: "arial black";
}

2）多个字体系列是用一个逗号分隔指明

p{
    font-family: 微软雅黑,黑体,"agency fb";
}

font-size

字体大小

body {
    font-size: 50px;  /*字体大小50px*/
}
#span1 {
    font-size: 25px;  /*字体大小25px*/
}

font-style

字体风格，该属性最常用于规定斜体文本。属性值：normal、italic、oblique

1）normal：文本正常显示；

2）italic：文本斜体显示；

3）oblique：文本倾斜显示，oblique是将文字强制倾斜。

说明：一般情况下，字体有粗体、斜体、下划线、删除线等诸多属性，但是不是所有字体都具有这些属性，一些不常用字体可能只有正常体，若使用italic属性则没有效果，所以需要oblique属性强制倾斜

font-weight

字体加粗，该属性设置文本的粗细。

100 ~ 900：为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。

说明一点：页面中想要突出显示的字体一般用span标签包含，然后修改样式

实例：

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

    <style>
        body{
            /*font-style: italic;*/
            /*font-weight: bold;*/
            /*font-size: 20px;*/
            /*font-family: 楷体;*/

            /* 可以使用font一次性设置 */
            font:italic bold 20px "Arial Black",楷体;
        }

    </style>

</head>
<body>

<h1>沉入绿影，品茶心</h1>
<p>
喜欢茶，有一种茶有个极其风雅的名字，叫飘雪。飘雪是茉莉花茶。我不敢用这种茶叶沏茶，因为是会失眠的。茶有千好，只是吃茶的坏处只有一项，就是吃多了会失眠。失眠是让人苦恼的事情。这就是吃茶的唯一的坏处。
</p>

<p>
没有茶的日子是荒芜的。寂静的影，在灯下阅读的喜悦，一壶清茶是必须的装饰。茶用味道说话，它在述说，不管你听不听得懂。茶若浓了，是悲伤;茶若淡了，是欢喜。淡到没有味时，茶就陷入沉思，不再说话。
</p>

<p>
    Are you learning another language? Maybe you‘re trying to get to grips with it for work or study, or maybe you‘re trying to master it just for the fun of it? Language learning is nothing new, of course, but technology has made it easier than ever to grasp.
</p>

</body>
</html>

效果：

6.2、文本样式

color

body {
    color:blue;
} 
h1 {
    color:#00ff00;
} 
h2 {
    color:rgb(255,0,0);
}
/* 最后一个参数是透明的，取值0~1 */
h3 {
    color:rgba(255,0,0,0.5);
}

text-align

设置文本对齐方式：

center 居中
right 居右
left 居左
justify 两端对齐

body {
    text-align:center;
}

text-decoration

underline 对文本添加下划线，与HTML的u元素相同。
overline 对文本添加上划线。
line-through 对文本添加中划线，与HTML中的s和 strike 元素相同。
none 关闭原本应用到元素上的所有装饰。

h3 {
    text-decoration:underline;
}

text-indent

/* 2em就代表缩进两个字 */
p.ident2 {
    text-indent: 2em;
}

6.3、超链接伪类和阴影

:hover
text-shadow

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 初始颜色 */
        a{
            color: blue;
            text-decoration: none;
            display: block;
        }
        /* 鼠标悬停时的状态 */
        a:hover{
            color: darkorange;
            font-size: 40px;
        }

        /* text-shadow: 阴影颜色 水平延伸距离 垂直延伸距离 阴影模糊值
        	水平距离和垂直距离可以为负，对应一个平面直角坐标系的坐标轴上的值
        */
        .price {
            text-shadow: red 10px 10px 2px;
        }

    </style>
</head>
<body>
<p>
    <img src="img/a.jpg" >
</p>
<p>
    <a href="#">码出高效：Java开发手册</a>
</p>
<p>
    <a href="#">作者: 杨冠宝</a>
</p>

<p >
    <a class="price" href="#">￥99</a>
</p>
</body>
</html>

效果：

6.4、背景和渐变

background-color

设置元素的背景颜色

body{
	background-color: white;   
}

background-image

设置背景图像

body{
	background-image: url("img/a.jpg");  
}

background-repeat

设置背景图像以何种方式铺展

body{
    background-image: url("img/a.jpg");
	background-repeat: repeat-y; 
}

repeat：全部铺满，默认
repeat-x：只会铺满水平方向
repeat-y：只会铺满垂直方向
no-repeat：背景图像不会重复，只有一个

渐变

语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...：用于指定渐变的起止颜色。
如果在起止颜色后有半分比：表示在当前方向上的此百分比处此颜色渐变开始

例子：

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

6.5、盒子模型

border、padding、margin三个属性构成了盒子模型。

border

设置所有的边框属性。

1）可同时设置边框的宽度、样式、颜色

table, th, td { 
    border: 1px solid black; 
}
table { 
    width:100%; height:50px; 
}

2）使用border-width、border-style、border-color单独设置

table,td {
    border-width: 1px;
    border-style: dotted;
    border-color: green;
}

3）border-collapse

设置是否将表格边框折叠为单一边框。
属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

table { 
    border-collapse : collapse; 
}

margin

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。

p.margin {
    margin: 2px 4px 3px 4px;
}

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right

p.margin{
    margin-top:100px; 
    margin-bottom:100px;
    margin-right:50px; 
    margin-left:50px; 
} 
*{
    margin: auto auto;
} 
*{
    margin: 100px auto;
}

说明：

auto：自动，可以理解为居中的意思。浏览器自动计算外边距。
- 需要是一个块级元素，且有宽度大小
margin: auto auto：第一个auto表示上下外边距自动计算，第二个auto表示左右外边距自动计算。但是上下外边距在自动计算时不会生效，而左右外边距会生效，表现为居中状态, 想要实现上下居中需自行计算

padding

设置元素所有内边距的宽度，或者设置各边上内边距的宽度。

如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性：

td { 
    padding:15px;
}

单独设置各边的内边距：padding-top、padding-left、padding-bottom、padding-right （同上）

默认按照上右下左的顺序设定（同上）

注意：元素的大小= margin + border + padding + 内容宽度

6.6、圆角边框

border-radius
也可以设四个值，也是顺时针对应四个角
因此我们可以画不同的图形

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        .div1{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            border-radius: 0 100px 0 0;
        }
        .div2{
            width: 100px;
            height: 50px;
            border: 2px solid red;
            margin: 30px;
            border-radius: 50px 50px 0 0;
        }

        /* 图片的大小为50x50 */
        img {
            border-radius: 25px;
        }
    </style>
</head>
<body>

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

<img src="img/a.jpg" >

</body>
</html>

效果：

6.7、阴影

box-shadow
参数：
- 阴影水平偏移值（可为负）
- 阴影垂直偏移值（可为负）
- 阴影模糊值（不可为负）
- 的阴影外延值（可为负）
- 阴影的颜色

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 60px;
            margin: 0 auto;

        }
        img{
            border-radius: 25px;
            box-shadow: 10px 10px 80px 2px red;
        }
    </style>
</head>
<body>
<div>
    <img src="img/a.jpg" >
</div>

</body>
</html>

效果：

6.8、浮动

display

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。

值	描述
none	此元素不会显示
inline	此元素将会显示为行内元素，元素前后没有换行符
inline-block	行内块级元素，既是是行内元素，也是块级元素
block	此元素将会显示为块级元素，元素前会带有换行符

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>
    块级元素
</div>
<span>行内元素</span>

</body>
</html>

效果：

float

float的属性值有none、left、right。

只有横向浮动，并没有纵向浮动。
会将元素的display属性变更为block。
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用 float）。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="father">
    <div class="layer1"><img src="img/1.jpg" ></div>
    <div class="layer2"><img src="img/2.jpg" ></div>
    <div class="layer3">为用户甄选海量的高清美图，用更流畅、更快捷、更精准的搜索体验，带你去发现</div>
    
</div>

</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}

.father{

    border: 2px solid black;
}

.layer1 {
    border: 1px solid black;
    float: left;
}

.layer2 {
    border: 1px solid black;
    float: left;
}

.layer3 {
    border: 1px solid black;
    float: left;
}

效果：

与display对比：

display
- 方向不可控
float
- 会出现父级边框塌陷问题

对于上面出现父级边框塌陷问题解决

clear

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

解决方法：

1、为父级元素设一个足够大的高度

.father{
    border: 2px solid black;
    height: 500px;
}

2、在父级div中最后添加一个空div

/* 空div的class值为clear */
.clear{
    margin: 0;
    padding: 0;
    clear: both;
}

3、overflow

/* 没有设置高度，高度由块内元素决定 */
.father{
    border: 2px solid black;
    overflow: hidden;
}

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

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

小结:

设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
浮动元素后面增加空div
简单，代码中尽量避免空div
overflow
简单，下拉的一些场景避免使用
父类添加一个伪类:after_(推荐)
写法稍微复杂一点，但是没有副作用，推荐使用

6.9、定位

相对定位

设置相对定位
- position: relative
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保
相对移动
- top
- right
- bottom
- left

示例：

<!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;
            margin: 0 auto;
        }
        a {
            display: block;
            width: 100px;
            height: 100px;
            background-color: fuchsia;
            text-align: center;
            line-height: 100px;
            text-decoration: none;
            color: white;

        }

        #box a:hover{
            background-color: blue;
        }

        .a2,.a4{
            position: relative;
            left: 200px;
            bottom: 100px;
        }

        .a5{
            position: relative;
            left: 100px;
            bottom: 300px;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <a class="a1" href="#">链接1</a>
        <a class="a2" href="#">链接2</a>
        <a class="a3" href="#">链接3</a>
        <a class="a4" href="#">链接4</a>
        <a class="a5" href="#">链接5</a>
    </div>
</body>
</html>

效果：

绝对定位

position: absolute
定位:基于xxx定位，上下左右~
- 没有父级元素定位的前提下，相对于浏览器定位
- 假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
- 在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

示例：

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

    <style>
        div{
            margin: 10px;
            padding: 5px;
        }

        #father{
            border: 1px solid red;
        }

        .d1 {
            background-color: #45ff64;
            position: absolute;
            left: 10px;
        }
        .d2 {
            background-color: fuchsia;
        }
        .d3 {
           background-color: blue;
        }


    </style>
</head>
<body>
<div id="father">
    <div class="d1">段落一</div>
    <div class="d2">段落二</div>
    <div class="d3">段落三</div>
</div>

</body>
</html>

效果：

固定定位

position: absolute
元素的位置相对于浏览器窗口是固定位置
移动与上面一样有四个方向

<!DOCTYPE html>
<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-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        div:nth-of-type(2) { /* 固定定位 */
            width: 50px;
            height: 50px;
            position: fixed;
            background-color: #8187ff;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

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

</body>
</html>

效果：

与绝对定位对比：

绝对定位是对于滑动条在最上边定位的，也就是初始位置，会随着滑动条移动而移动
固定定位是不会移动的

z-index

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
属性值
- auto：默认。堆叠顺序与父元素相等。
- number：设置元素的堆叠顺序。
- inherit：规定应该从父元素继承 z-index 属性的值。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="img/bg.png" ></li>
        <li class="text">心花怒放</li>
        <li class="bg"></li>
        <li>主演：黄渤 徐峥</li>
        <li>时间：2014-09-30</li>
    </ul>
</div>
</body>
</html>

#content{
    margin: 0;
    padding: 0;
    width: 300px;
    overflow: hidden;
    border: 2px solid red;
    font-size: 12px;
    line-height: 25px;
    text-align: center;
}

ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 父级元素确定相对定位 */
ul{
    position: relative;
}

.text,.bg {
    /* 确定绝对定位，相对于ul */
    position: absolute;
    width: 300px;
    height: 25px;
    bottom: 56px;

}

.text{
    z-index: 999;
}

.bg{
    background-color: #8187ff;
    /* 设置透明度 0~1 */
    opacity: 0.8;
}

效果：