CSS3

目录

  1. 样式
  2. 选择器
  3. 基本元素美化
  4. 盒子模型
  5. 浮动
  6. 定位
  7. 网页动画（特效效果）

1. CSS简介

1.1 CSS是什么

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体、颜色、边距、高度、宽度、北京图片、网页定位、网页浮动

1.2 CSS发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画。。。浏览器兼容性~

1.3 快速入门

第一个CSS文件

index.html

<!DOCTPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
    <title>我的第一个CSS程序</title>
    
    <!-- 规范：<style>可以编写CSS的代码，每一个声名，最好使用分号隔开 -->
    <!--
		<style>
			选择器{
				声明1；
				声名2；
    		}
		</style>
    -->
    
    <link rel="stylesheet" href="css/style.css">
</head>    
    
<body>
	<h1>我是标题</h1>    
</body>
   
</html>

style.css

h1{
    color:red;
}

优点：

  1. 内容与表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式非常丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，容易被搜索引擎收录

1.4 CSS的四种导入方式

  1. 内部样式

    html文件：

    <head>
    ...
    <style>
    	选择器{
    		语法1；
    		语法2；
    		...
		}
    </style>
</head>

  2. 外部样式一，建议使用

    html文件：

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

    css文件：

选择器{
语法1；
语法2；
...
}




3. 外部样式二，不建议使用，这里是使用了css代码导入，在生成大页面时，html会先出现，css渲染有延迟

html文件：

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

  1. 行内样式

    <h1 style="color:red">我是标题</h1>

ps：

  1. style标签内是css代码，其注释是/* */

  2. 优先级：就近原则

2. 三种基本选择器

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

2.1 基本选择器

  1. 标签选择器——会选择这个页面上所有该标签

    标签名{
	声明；
}

  2. 类选择器

    <style>
	/* 类选择器
    样式： .class名{}
    好处： 可以多个标签归类，是同一个class，可以复用
    */
    
    .hjq{
        color:red;
    }
    .cat{
        color:blue;
    }
</style>


<h1 class="hjq">标题1</h1>
<h1 class="cat">标题2</h1>
<h1 class="hjq">标题3</h1>
<p class="hjq">p标签</p>

  3. id选择器

    <style>
	/* id选择器
    格式：#名称{}
    优先级：id>class>标签
    */
    #hjq{
        color:red;
    }
</style>

<h1 id="hjq">标题1</h1>

2.2 层次选择器

ps：*代指所有

  1. 后代选择器：在某个元素的下级所有元素

    元素1 元素2{
    ...
}

  2. 子选择器：在某元素的后面的一代，仅限于直系一代，孙辈就不算

    元素1>元素2{
	...
}

  3. 相邻兄弟选择器：仅限于同辈下一个

    元素1 + 元素2{
	...
}

  4. 通用兄弟选择器：选择接下来的所有同级元素（弟弟选择器）

    元素1~元素2{
	...
}

2.3 结构伪类选择器

伪类： 条件

/* ul下的第一个li*/
ul li:first-child{
    color:red;
}

ul li:last-child{
    color:red;
}

/*  选中p1 ： 定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！ 顺序
*/
p:nth-child(2){
    background:green;
}

/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(1){
    background:yellow;
}

2.4 属性选择器

id + class结合

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

/* 存在id属性的元素   a[]{} */
a[id]{
    ...
}

/* id=first的元素 */
a[id = first]{
    ...
}

/* class中有links的元素 */
a[class *= "links"]{
    ...
}

/* 选中href中以http开头的元素 */
a[href ^= http]{
    ...
}

/* 选中href中以jpg结尾的元素 */
a[href $= jpg]{
    ...
}

3. 美化网页元素

3.1 为什么要美化

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

span标签：突出文字

注：其实这些标签没有本义，其名字都可以自己取，但是意义是，如此一来，这段文字有个标签包着，我们可以用css去美化文字了。

3.2 字体样式

<!-- 字题样式 
   font-family : 字体
   font-size   : 字体大小
   font-weight : 字体粗细
   color		: 字体颜色
-->

<style>
   body{
       font-family:"Arial Black",楷体；
       color:#a13d30
   }
   h1{
       font-seze:50px;
   }
   p1{
       font-weight:bolder;
   }
</style>

3.3 文本样式

  1. 颜色

    color : 单词 -> color:red;

    color:RGB -> color:#FFFFFF;

    ​ color:rgb(0,255,255);

    color:RGBA -> color:rgba(0,255,255,0.5);

    rgb:00FF/0255

    rgba的a ： 透明度：0~1

  2. 排版

    text-align : center/left/right;

  3. 首行缩进

    text-indent:2em; //首行收缩2个字

  4. 行高

    行高和块的高度一致就可以实现上下居中

    <!-- 块的高度 -->
height=300px
<!-- 字体行高 -->
line-height=300px

  5. 装饰（划线）

    <!-- 下划线 -->
text-decoration:underline;
<!-- 中划线 -->
text-decoration:line-through;
<!-- 上划线 -->
text-decoration:overline;

  6. 文本图片水平对齐

    vertical-align:middle;

3.4 阴影

/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 
   以xy坐标轴为例，水平偏移右为正，垂直偏移下为正
*/
#price{
    text-shadow : blue 10px -10px 2px;
}

3.5 超链接伪类

通俗来讲，超链接伪类就是想a：hover这样的东西，就是css选择器的一种，用来修饰超链接的，通过超链接伪类，我们可以使用css代码来修改超链接的样式。

常规来说，a，a:hover就够用了

/* 默认的颜色 */
a{
    text-decoration : none;
    color : #000000;
}

/* 鼠标悬浮的状态 */
a:hover{
    color : orange;
    font-size : 50px;
}

3.6 列表

/* 
list-style:
	none 去掉圆点
	circle 空心圆
	decimal 数字
	square 正方形
*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7 背景

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("images/tx.jpg");
        
        /* 集合方式:
        颜色， 图片， 图片位置， 平铺方式
        background: red url("../images/d.gif") 170px 10px no-repeat;
        /*
    }
    /* 水平平铺 */
    .div1{
        background-repeat: repeat-x;
    }
    /* 垂直平铺 */
    .div2{
        background-repeat: repeat-y;
    }
    /* 不平铺 */
    .div3{
        background-repeat: no-repeat;
    }
</style>


<body>
    <!-- 这种方式创造的空标签可以在css的改造下由一个空的承载对象变成很漂亮的样子 -->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

3.8 渐变

background-color: #FFFFFF
background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)

4. 盒子模型

4.1 什么是盒子模型

margin：外边距

padding：内边距

border：边框

box

注意：盒子大小 = margin + padding + border + 内容宽度

4.2 边框

设置边框代码如下:

border-left/right/top/bottom-style/width/color:

/* 上右下左：顺时针 */
border: 0 0 0 0;
  1. 边框的粗细--width
  2. 边框的样式--style
  3. 边框的颜色--color

4.3 内外边距

/* 外边距 */
margin-left/right/top/bottom-style/width/color:

/* 内边距 */
padding-left/right/top/bottom-style/width/color:

/* 上右下左：顺时针 */
margin: 0 0 0 0;

/* 第一个：上下
   第二个：左右 */
margin: 0 1px;

/* 自动对齐：auto 
   margin: 0 auto; 居中
   要求： 在块元素中，且块元素有固定的宽度


*/
 
margin: 0 auto;

4.4 圆角边框

border-radius: 参数;

/* 4参数： 顺时针
   2参数： 左上右下 右上左下 */

/* 圆圈： 圆角 = 半径？ */

4.5 盒子阴影

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

5. 浮动

5.1 标准文档流

块级元素，独占一行

h1~h6 p div 列表...

行内元素，不独占一行

span a img strong...

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

5.2 display

display : block;  /* 块元素 */
display : inline;  /* 行内元素 */
display : inline-block;  /* 是块元素，但是可以内联，在一行 */
display : none  /* 消失，不显示 */

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float，因为方向不可控制

5.3 float

左右浮动 float

float: right;
float: left;

浮动相对于display，浮动可以控制方向，比如向左漂还是向右飘。

5.4 父级边框塌陷的问题（浮动元素超出父级元素的框范围）

clear： 清除浮动，让浮动起来的东西按照标准文档流的方式排列（还是浮动的）

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

解决方案：

  1. 增加父级元素的高度，让父级元素可以包住浮动内容。

    height: 800px; /* 让父级元素够高 */

  2. 增加一个空的div标签，清除浮动（本来上面的东西是要浮动到下面的，可是呢下面增加了一个不允许两侧有浮动的东西，也就是不允许上面的东西浮动到下面，所以父级边框把它框起来了）（或者说：因为下面不允许漂浮，所以浮动元素只能回到父级元素里撑开）

    <!-- 第一步：在父级元素包含的东西的最后面加一个空的div -->
<div id="father">
    ...
    <div class="clear"></div>
</div>

<!-- 第二步：div元素设置不允许浮动 -->
<style>
    .clear{
        clear: both;
        margin: 0;
        padding: 0;
    }
</style>

  3. overflow

    在父级元素中增加一个 overflow: hidden; 这种方式多的内容会被修剪，多被用
在父级元素中增加一个 overflow: auto/scroll； 这种方式是加上滚动条，拉动滚动条可以看到完整内容

  4. 父类添加一个伪类: after （与上面第二种是一样的原理） （目前最受欢迎）

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

6. 定位

6.1 相对定位

/* 相对自己原来的位置进行指定的偏移 */
#first{
    ...
    position: relative;
    top: -20px; /* 向上偏移20个像素，但是为什么是负数呢，可以理解为，这个元素的top被-20px的东西填了，要是是20px就会被空白迫着往下走了，但是是负，所以就向上走了 */
    left: 20px; /* 向右偏移20个像素，这个代表左边被填了20px的空白东西，所以元素向右走了20px */
}

注：它仍然在标准文档流中，原来的位置会被保留。

6.2 绝对定位

定位：基于xxx定位，上下左右~

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

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

  3. 不在标准文档流中，原来的位置不会被保留

    position: absolute;
left: 100px;

6.3 固定定位

固定定位的元素会定在那里，不会随着滚动条的改变而改变位置

position: fixed;
right: 0;
botton: 0; /* 这个语句把元素定在页面的右下方，就像回到顶部的小火箭一样 */

6.4 z-index

z-index: 0;  /* 数字代表层数，数字越大就代表越上面的层，越优先被显示,最低是0，最高无限 */

opacity: 0.5  /* 背景透明度 */
filter: Alpha(opacity=50)
posted @ 2021-03-20 00:10  何-某人  阅读(132)  评论(0)    收藏  举报