前端知识-2-CSS

一、什么是 CSS?

CSS是一个能改变 HTML 文档中样式，那么它有什么作用？

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

可以看出就类似我们 Python 自动化测试代码中数据分离，POM设计模式等等。

其实在 HTML 文档中也可以更改样式的，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html内样式</title>
    <style>
        /*所有p标签改样式*/
        p{color: #cc0000}
    </style>
</head>
<body>
<p>我是一个小小的石头</p>
<div>
    <p>div大石头</p>
</div>
</body>
</html>

二、选择器

有了选择器才能对应改变你想改变的 HTML 文档中一些样式，所以接下来我们学习选择器。

注释使用：/* 您的注释内容 */

引入 CSS 文件样式需在 head 中导入：<link rel="stylesheet" href="CSS文件名.css">

1、标签选择器：直接标签名

/* 1、标签选择器 */
p{color:red;font-size:48px}

2、ID选择器：#id

id 是你在定义 HTML 文档中的 id。

/* 2、ID选择器 */
#gsxl{font-size:24px}

3、类选择器：.class

/* 3、类选择器 */
.class{color:red;font-size:48px}

4、整体替换：*

/* 4、整体替换 */
* {color:#A8A8A8;}

接下来是组合选择器：

5、后代选择器：空格

divid 中 p 标签任意一种组合比如id+标签

/* 5、后代选择器 空格*/
#divid p{color: #66cc66}

6、下级选择器：>

divid 下面的所有 p 标签

/* 6、下级选择器 > */
#divid >p{color: #167F92}

7、毗邻选择器：+

/* 7、毗邻选择器 + */
#div1+p{color: chartreuse;}

8、(弟弟)同级选择器：~

/* 8、(弟弟)同级选择器 ~ */
#div1~p{color: red;}

9、属性选择器：[属性值]

/* 9、属性选择器 */
[res] {color: yellow}

10、分组选择器：逗号

/* 10、分组选择器 */
#d1,p,div{color: blueviolet}

11、嵌套选择器：+

/* 11、嵌套选择器 */
div+h4{color: coral}

12、其他使用：ID、自定义属性值等任意组合

^：匹配xx开头；

$：匹配xx结尾

/* 12、其他使用 */
[ret="gs"] {color: #024457}

1-12 选择器对应所有 HTML 文档：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>css文件导入</title>
    <!--    <link rel="stylesheet" href="index.css">-->
    <link rel="stylesheet" href="index.css">

<!--  ^：匹配xx开头；
      $：匹配xx结尾
-->
<!--    <style>[ret^="gs"]{color: #66cc66}</style>-->
<!--    <style>[ret$="xl"]{color: #66cc66}</style>-->
</head>
<body>

<!-- 1、标签选择 -->
<div>
    <p>pppp标签</p>
    <div>
        <p>啪啪啪啪啪啪</p>
    </div>
</div>
<p>我也是pppp</p>

<!-- 2、ID选择器 -->
<div id="gsxl">
    <p>哈哈哈抓不到我吧，没有办法</p>
    <h6>我是一个h6</h6>
</div>

<!-- 3、类选择器 -->
<div class="haha">累呀
    <p class="haha">累呀累呀累呀累呀</p>
</div>
<p class="haha">累呀累呀</p>

<!-- 4、整体替换 -->
<div>
    <p>666</p>
    <div>整体替换？？？</div>
</div>

<!--  6、儿子选择器  -->
<div id="divid">
    <p>我是儿子1,也就是嵌套在div第一层的标签</p>
    <div>

<!--  5、后代选择器     -->
        <p>我是嵌套在div第二层中的P标签</p>
        <div>我是嵌套在div中的span标签</div>
    </div>
    <p>我是儿子2</p>
</div>

<!-- 7、毗邻选择器-->
<div id="div1">我是毗邻</div>
<p>我是毗邻1</p>

<!-- 8、同级选择器-->
<p>111</p>
<p>222</p>
<p>333</p>

<!-- 9、属性选择器 -->
<div res="gsxl">小石头</div>
<p res="gsxl">大石头</p>

<!-- 10、分组选择器-->
<div id="d1">
    <p>666</p>
    <div class="c6">整体替换？？？</div>
</div>

<!-- 11、嵌套选择器-->
<div id="d2"></div>
<h4>p4444</h4>

<!-- 12、其他使用-->
<p ret="gs">哈哈哈抓不到我吧</p>
<p ret="gsxl">哈哈哈抓不到我吧111</p>
<p ret="hahxl">哈哈哈抓不到我吧222</p>

</body>
</html>

13、伪类选择器

①a:link，链接未被访问点击过的颜色

/*a:link 链接未被点击过的颜色 */
a:link {color: #66cc66;}

②a:visited，链接被访问点击过的颜色

/*a:visited 链接被点击过的颜色 */
a:visited {color: #cc0000;}

③a:hover，鼠标移上去的颜色

/*a:hover 鼠标移上去的颜色 */
a:hover {color: #cc6600}
#d1:hover {color: #cc0000}

④a:active，鼠标选中时的颜色

/* a:active 选中时的颜色   */
#d1:active {color: deeppink}

⑤输入框聚焦时底色

/* 输入框聚焦时底色 */
input:focus{
    outline: #cc0000;
    background-color: #A8A8A8;}

⑥首字符设置特殊样式

/* 首字符设置特殊样式 */
p:first-letter{
    font-size: 48px;
    color: darkred}

⑦在HTML内容前面加字符

/* 在HTML内容前面加字符 */
.str:before{
    content: ">>>>";
    color: #cc0000;}

⑧在str类行字符后面加入字符

/* 在字符后面加入一个问号 */
.str:after{content: "[?]";
color: #5495E6}

附上伪类选择器 HTML 文档：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器示例</title>
    <style>
        /*a:link 链接未被点击过过的颜色 */
        a:link {
            color: #66cc66;}

        /*a:visited 链接被点击过过的颜色 */
        a:visited {
            color: #cc0000;}

        /*a:hover 鼠标移上去的颜色 */
        a:hover {color: #cc6600}
        #d1:hover {color: #cc0000}

        /* a:active 选中时的颜色   */
        #d1:active {color: deeppink}

        /* 输入框聚焦时底色 */
        input:focus{
            outline: #cc0000;
            background-color: #A8A8A8;}

        /* 首字符设置特殊样式 */
        p:first-letter{
            font-size: 48px;
            color: darkred}

        /* 在内容前面加内容 */
        .str:before{
            content: ">>";
            color: #cc0000;}

        /* 在str类行字符后面加入字符 */
        .str:after{content: "[?]";
        color: #5495E6}
    </style>
</head>
<body>
<div id="d1">我是div的标签</div>
<a href="https://www.cnblogs.com/gsxl/">博客园</a>
<a href="https://www.baidu.com/">百度</a>
<a href="https://www.sohu.com/">搜狐</a>
<input type="text" name="" id="">
<p>我是一个小小的石头，我是一个小小的石头，我是一个小小的石头，我是一个小小的石头</p>
<p>我是一个小小的石头，我是一个小小的石头，我是一个小小的石头</p>
<p>我是一个小小的石头，我是一个小小的石头</p>
<p>我是一个小小的石头</p>
<p class="str">我是一个小小的石头</p>
<p class="str">我是一个小小的石头</p>
</body>
</html>

三、文字属性

1、font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

body{
     font-family: "Microsoft YaHei UI Light","微软雅黑",sans-serif;}

2、字体大小：font-size，可在body直接设置为全局变量

/*字体大小*/
p{font-size: 48px}

3、字重

/*字重*/
p{font-weight: 900}

4、文字对齐：text-align

/* 文字对齐：text-align
left:默认左对齐
right:右对齐
center:居中
justify:两端对齐*/
p{text-align: center}

5、文字装饰：text-decoration

underline：下划线
line-through：删减线
text-decoration : none：取消标签自带的下划线

/*文字装饰*/
p{text-decoration: line-through}

6、字符缩进：text-indent

/*6、字符缩进：text-indent*/
div{text-indent: 96px}

四、背景属性

1、背景颜色

/*1、背景颜色*/
background-color: red;

2、背景图片

/*背景重复*/
/*repeat(默认):背景图片平铺排满整个网页*/
/*repeat-x：背景图片只在水平方向上平铺*/
/*repeat-y：背景图片只在垂直方向上平铺*/
/*no-repeat：背景图片不平铺*/
/*ackground-position: 50% 50% 图片比例居中*/
/*ackground-position: 50px 50px 图片比例居中*/

/*2、背景图片*/
background-image: url('1.jpg');

3、边框，通常简写为：border: 10px green solid;

上下左右边框自由设置，如右边框：border-right: 10px solid green;

/* 3、边框
 默认写法：border: 10px green solid;*/
.c2 {
    height: 500px;
    width: 300px;
    background-color: black;
    border-width: 10px;
    border-color: green;
    border-style: solid;
}

4、控制展示顺序：display

如竖列表改为横列表

4、控制展示顺序
.c1 {display: inline;}

5、CSS盒子模型

顺序：上下右左

1. margin: 边框之外的距离(多用来调整标签和标签之间的距离)，一般初始化 margin 参数。
2. border边框
3. padding:内容区和边框之间的距离(内填充/内边距)
4. condent: 内容

/*5、CSS盒子模型*/
.test {
  margin: 5px 10px 15px 20px;}

五、float 浮动

只要设置为 float 浮动，就成为块级标签

1、div 配合 float 来做页面的布局例子：float: right

<!-- div 配合 float 来做页面的布局
     行内标签不能设置宽度高度-->
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        * {margin: 0;padding: 0}
        .c1 {height: 500px;
            width: 20%;
            background-color: #66cc66;
            float: left}
        .c2 {height: 500px;
            width: 80%;
            background-color: #cc0000;
            float: right}
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

2、清除浮动示例：clear: left;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动示例</title>
    <style>
        #d1 {
            border: 1px solid black;
        }
        .c1,
        .c2 {
            float: left;
            height: 100px;
            width: 100px;}
        #d1:after {
            content: "";
            clear: left;
            display: block;}
    </style>
</head>
<body>

<div id="d1">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <div class="c3"></div>

</div>
</body>
</html>

3、溢出处理：overflow，圆头像例子。

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。
overflow：水平和垂直均设置
overflow-x：设置水平方向
overflow-y：设置垂直方向

.res_img {
width: 120px;
height: 120px;
border: 2px solid red;
border-radius: 100%;
/*溢出处理为圆头像*/
overflow: hidden;

4、定位

relative：相对定位
absolute：绝对定位
fixed：固定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位示例</title>
    <style>
        * {margin: 0; padding: 0;
            text-align: center;
            line-height: 150px
        }
        .c1,.c2,.c3{
            width: 150px;
            height: 150px;}
        .c1 {background-color: #cc0000}

        /* relative：相对定位*/
        .c2 {background-color: #66cc66;
            position: relative;
            top: 150px;
            left: 300px}

        /* absolute：绝对定位*/
        .c3 {background-color:rosybrown;
            position: absolute;
            left: 150px;
            top: 150px}

        /* fixed：固定位置 */
        .c4 {position: fixed;
            bottom: 100px;
            right: 120px;
            background-color: #1f96e0;
            line-height: 25px}
    </style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">c2</div>
<div>
    <div class="c3">c3</div>
</div>
<div class="c4">返回顶部</div>
</body>
</html>

欢迎来大家QQ交流群一起学习：482713805 ！！！