CSS 3学习

一、CSS的简单入门

Cascading Style Sheets层叠级联样式表

CSS:表现（美化网页）

规范：<style>可以编写css的代码，每一个声明用分号结尾。

语法：

        选择器{

                声明1;

                声明2;

                声明3;

        }

3种导入CSS的方式

 1、行内样式

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:green">我是标题</h1>

2、内部样式

写在html文件中<style>标签里面

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

3、外部样式

一般将CSS文件与HTML文件分开来写，然后通过标签连接。

<Link rel = "stylesheet" href = "css文件路径">

3种导入方式的优先级：就近原则。

二、CSS选择器（重要）

2.1、3种基本选择器

（1）、标签选择器

选择一类标签

/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
    color: blueviolet;
}

（2）、类选择器

选择所有class属性一致的标签，可以跨标签

/*类选择器的格式   .class的名称{}
    可以将多个标签归类,是同一个class
*/
.a123{
    color: red;
}
.a2332{
    color: green;
}

（3）、id选择器

全局唯一

/* id选择器  id 必须保证全局唯一
    #id名称{}
*/
#q1021{
    color: red;
}

（在用的时候发现id和class的命名必须有字母或字母开头？？不然无法生效）

优先级：id>class>标签

2.2、层次选择器

（1）、后代选择器

在某个元素的后面 的所有标签（但必须是同一类型）

/*后代选择器*/
body p{
    background: blueviolet;
}

（2）、子选择器

只有一代，儿子

/*子选择器*/
body>p{
    background: red;
}

（3）、相邻兄弟选择器

同辈

/*相邻兄弟选择器：只有一个，相邻（向下）*/
#aa123 + h1{
    background: green;
}

（4）、通用选择器

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
#aa123 ~ h1{
    background: red;
}

2.3、结构伪类选择器

感觉不是很常用，用的时候再查

2.4、属性选择器（常用）

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

标签[属性名和属性值要求]{

            }
*/
p[id]{
    background: aqua;
}

三、美化网页元素

3.1、字体样式

<!--
    font-family：字体
    font-size：字体大小
    font-weight：字体粗细
    color：字体颜色
-->

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

3.2、文本样式

<!--
颜色：
    单词
    RGB 0~F
    RGBA  A：0~1

text-align：排版，居中
text-indent：2em; 段落首行缩进
height：300px;
line-height:300px;
一般控制 行高和块 的高度一致，就可以上下居中
-->
<style>
    h1{
        color: rgb(0,255,255);
        text-align: center;
        text-indent: 2em;
    }
</style>

 关于下划线：

/*加下划线*/
p{
    text-decoration: underline;
}
/*加中划线*/
p{
    text-decoration: line-through;
}
/*加上划线*/
p{
    text-decoration: overline;
}
/*超链接去下划线*/
p{
    text-decoration: none;
}

水平对齐：

/*水平对齐~ 参照物，  a, b*/
img,span{
    vertical-align: middle;
}

效果如下：

3.3、阴影（不常用）

/*text-shadow: 阴影颜色， 水平偏移， 垂直偏移， 阴影半径*/
p{
    text-shadow: #45dbf7 10px -10px 2px;
}

3.4、超链接伪类

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

原状态： 

鼠标悬浮后：

 

鼠标按住未释放：

3.5、列表

/*
    list-style：
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
ul{
    background: #00ff00;
}

3.6、背景

div{
    width:1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("");
    /*默认是全部平铺的 repeat*/
}
    /*颜色 图片 图片位置 平铺方式*/
p{
    background: red url("") 270px 10px no-repeat;
}
    /*或者单独设置其中参数*/
p{
    background-image: url("");
    background-repeat: no-repeat;
    background-position: 150px 2px;
}

3.7、渐变

一般可用这个网站制作：

https://www.grabient.com/

四、盒子模型

4.1、什么是盒子模型

 margin：外边距

padding：内边距

border：边框

4.2、边框

/*外边距的妙用：居中元素
    margin：0 auto;
*/
/*body总会有一个默认的外边距等等... 一般会将各种值初始化*/
h1,ul,li,a{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
/*border：粗细，样式，颜色*/
#box{
    width: 300px;
    border: 1px solid red;
}

4.3、内外边距

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

4.4、圆角边框

四个角

/*
顺时针方向  圆圈：圆角 = 半径！
*/
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
}

效果：

4.5、阴影

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow: 10px 10px 1px green;
}

效果：

5、浮动

5.1、标准文档流

 

5.2、display

/*
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行
    none
*/
div{
    width:100px;
    height: 100px;
    border: 1px solid red;
    display: inline;
}

变成：

 这个是一种实现行内元素排列的方式，但是我们很多情况都是用float

5.3、float

左右浮动

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

5.4、父级边框塌陷的问题

1、浮动元素后面增加空div，清除浮动

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

2、设置父元素的高度

#father{
    height:1000px;
}

3、设置overflow属性

在父级元素中增加一个属性

#father{
    overflow: hidden;/*一般添加这个属性*/
    overflow: scroll;/*可以产生滚动条*/

4、父类添加一个伪类：after（推荐）

写法稍微复杂，但是没有副作用。

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

5.5、对比

• display

方向不可以控制

• float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。

6、定位

position属性指定了元素的定位类型。

position属性的五个值：

• static
• relative
• fixed
• absolute
• sticky

static是HTML元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

6.1、相对定位

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

div{
    position:relative;
    left:-20px;
}

6.2、绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

div{
    position:absolute;
    left:-20px;
}

6.3、固定定位fixed

元素的位置相对于浏览器窗口是固定位置

即使窗口是滚动的它也不会移动

div{
    position:fixed;
    right:0;
    bottom:0;
}

6.4、z-index

/*0~无穷大，越大越在外层*/
div{
    z-index:0;
}

 opacity:0.5;可用于设置背景不透明度

css的基础暂时学到这里啦！0.0~