1.样式优先级

①同类样式符合就近原则；
②选择器有不同权重：
        标签选择器:1
        类选择器: 10
        id选择器: 100
        行内样式: 1000
        !important: 10000(不要乱用)

2.代码调试

浏览器页面右键->检查或F12

练习的代码：

<!DOCTYPE HTML >
<html><head><title>  </title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href=""><style type="text/css">h1{text-align:center;color:red;}p{color:blue;font-family:微软雅黑;}#zhu{color:blue;}span{color:black;text-decoration:underline;font-size:25px;}span{color:red;}</style></head><body><h1>人物简介</h1><hr /><p><span>孙悟空:</span><b>这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容</b></p><p><span id="zhu">猪八戒:</span>这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容这是人物介绍内容</p></body>
</html>

3.边框 border 练习

3.1 div 中

自身是个块状元素,水平方向上默认会充满容器;多个div之间默认竖着排列

/*所有边框样式*/
border: 宽度 样式 颜色;
/*顶部边框*/
border-top: 宽度 样式 颜色;
/*左边边框*/
border-left: 宽度 样式 颜色;
/*右边边框*/
border-right: 宽度 样式 颜色;
/*底部边框*/
border-bottom: 宽度 样式 颜色;/*某个边框单独设置*/
/*宽度*/
border-top-width: 宽度;
/*颜色*/
border-top-color:颜色;
/*样式:*/
border-top-style:样式;/*设置边框的弧度*/
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;

3.2 span 中

<span>标签是一个行内元素，不能设置width和height,能设置padding和margin；多个<span>之间是横向排列的

margin:20px;
padding:20px;
border:2px solid red;

4.字体样式

/*字体样式*/
font-size:30px; /*大小*/
color:green; /*颜色*/
font-family:黑体;/*类型*/
font-style:italic; /*字体风格*/
font-weight:bold; /*粗细*/

5.文本样式

vertical-align:设置文字的行内高度，不能实现div里文字的垂直居中

/*文本阴影*/
/*规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色： */
text-shadow
/*设置文本框阴影*/
text-shadow:2px 2px 5px blue;/*设置容器阴影:x轴偏移 y轴偏移 模糊度 阴影颜色*/
box-shadow:20px 20px 20px gray;/* 列表样式（点/数字）:用于列表标签 ul ol */
list-style

/*文本水平对齐方式*/
text-align:center;
/*设置文本缩进:em比例单位
text-indent:2em;*//*内容行高:行高和容器高度一致时，文本会垂直居中*/
line-height:400px;/*字符间距*/
letter-spacing:10px;/*文本修饰*/
text-decoration:line-through;

6.背景样式

div标签:

background:背景
background-color:背景颜色
background-image:背景图片
background-repeat:背景平铺方式
background:背景图片位置
background-size:背景图片大小

/*背景样式*/
background:颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度;平铺方式:
no-repeat(不平铺) repeat(全平铺) repeat-x(水平平铺) repeat-y(垂直平铺)背景位置：
1.像素值
2.百分比
3.关键字（水平:left center right） (垂直:top center bottom)设置多张背景图片:
background属性后的内容用逗号分隔

/*复合写法设置背景:批量设置样式属性*/
background:颜色 图片 平铺方式 水平位置 垂直位置 / 宽度 高度
background:red url(gif/7.gif) no-repeat -50px -50px / 150px 150px;
/*设置多张图片时不能设置颜色*/
background:url(gif/7.gif) no-repeat 50px 50px / 150px 150px,url(gif/4.gif) no-repeat 150px 150px / 150px 150px;

7. 3~6节的综合练习代码：


<!DOCTYPE HTML >
<html><head><title>  </title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href=""><style type="text/css">.circle{width:200px;height:200px;background-color:blue;border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:100px;border-bottom-right-radius:100px;text-align:center;line-height:200px;}.box{width:200px;height:200px;border-left:5px solid red;border-top:5px dashed blue;border-right:5px double green;border-bottom:5px solid yellow;font-size:30px;font-family:黑体;color:red;font-weight:bold;font-style:italic;letter-spacing:10px;text-decoration:line-through;}span{vertical-align:-10px;}.left{margin:50px;}#mu{border: 5px solid black;width: 250px;list-style: underline;list-style-image: none;box-shadow: 5px 5px 5px red;text-shadow: 3px 3px 3px gray;}#taili{width:600px;height:400px;border:5px solid black;color:red;font-size:30px;text-align:center;font-family:隶书;line-height:600px;font-style:italic;background-image:url(1.jpg);background-repeat:repeat-y;}#taili2{width:600px;height:400px;border:5px solid black;color:red;font-size:30px;text-align:center;font-family:隶书;line-height:400px;font-style:italic;background-image:url(2.jpg);background-repeat:repeat-x;}</style></head><body><div class="circle">一个圆</div><div class="box">这是一个框</div><div class="left"><ul id="mu"><li>乌鲁木齐天气晴转阴20℃</li><li>乌鲁木齐天气晴转阴20℃</li><li>乌鲁木齐天气晴转阴20℃</li><li>乌鲁木齐天气晴转阴20℃</li><li>乌鲁木齐天气晴转阴20℃</li></ul></div><p>这里有些字<span>随便说几句话</span>就行</p><div id="taili">精美台历</div><div id="taili2">精美台历</div></body>
</html>

8.动画效果

8.1鼠标悬浮

选择器:hover {样式属性:值;
}

8.2过渡效果

transition 过渡是元素从一种样式逐渐改变为另一种的效果，当元素中的某个属性变化的时候，以动画的方式呈现属性的变化过程

选择器{transition: 样式属性 时间;
}

overflow：属性规定当内容溢出元素框时发生的事情

练习：滑动菜单

三级菜单：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三级滑动菜单</title><style type="text/css">ul{padding: 0px;margin: 0px;width: 120px;text-align: center;background-color: aqua;overflow: hidden;}ul ul{display: none;background-color: blueviolet;}.second ul{height: 0px;background-color: blue;transition: height 1s;}.first:hover ul{display: block;}.second:hover ul{height: 63px;background-color: red;}</style>
</head>
<body><ul><li class="first">一级菜单01<ul><li class="second">二级菜单01<ul><li>三级菜单01</li><li>三级菜单02</li><li>三级菜单03</li></ul></li><li class="second">二级菜单02<ul><li>三级菜单01</li><li>三级菜单02</li><li>三级菜单03</li></ul></li><li class="second">二级菜单03<ul><li>三级菜单01</li><li>三级菜单02</li><li>三级菜单03</li></ul></li></ul></li><li class="first">一级菜单02<ul><li class="second">二级菜单<ul><li>三级菜单01</li><li>三级菜单02</li><li>三级菜单03</li></ul></li></ul></li><li class="first">一级菜单03<ul><li class="second">二级菜单<ul><li>三级菜单01</li><li>三级菜单02</li><li>三级菜单03</li></ul></li></ul></li></ul>
</body>
</html>

第四章 CSS的深入学习相关推荐

第四章css总结,第四章CSS层叠样式表分析.doc
第四章CSS层叠样式表分析第章CSS层叠样式表CSS的" " color=" ">这样的标签以及与标签搭配的显示属性(如"background ...
前端基础知识第四章---CSS
前言 ❤️ 生活中总有一些惊喜值得期待,只要我们一直保持着热爱 ❤️ 前端基础知识第四章---CSS 一.CSS 第四章 (1)浮动(float) 1.1 传统网页布局的三种方式 1.2 标准流(普通 ...
二进制除法教程计算机基础,计算机应用基础第四章《二进制的学习》课件.ppt...
<计算机应用基础第四章<二进制的学习>课件.ppt>由会员分享,可在线阅读,更多相关<计算机应用基础第四章<二进制的学习>课件.ppt(26页珍藏版)> ...
机器学习原来这么有趣！第四章：用深度学习识别人脸
第一章:全世界最简单的机器学习入门指南 https://blog.csdn.net/wskzgz/article/details/89917343 第二章:用机器学习制作超级马里奥的关卡 https: ...
有关第四章css的介绍
第四章 1.css的基本语法:由选择器,属性和属性值组成 css规则:每条样式用分号隔开,css的注释符为/ *---- * / 样式表分为:外部样式表,内嵌样式表,行内样式表外部样式表:将样式放在 ...
《机器学习》第四章人工神经网络深度学习启蒙篇
神经网络是一门重要的机器学习技术.它是目前最为火热的研究方向--深度学习的基础.学习神经网络不仅可以让你掌握一门强大的机器学习方法,同时也可以更好地帮助你理解深度学习技术. 本文以一种简单的,循序的方 ...
《Python语言程序设计》第四章（选择）学习笔记
<Python语言程序设计>学习笔记笔记选自<Python语言程序设计>[美]梁勇著本篇笔记没有记录用python绘画的turtle库第4章选择可以使用int函数将 ...
Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
可视化导论 - 第四章数据可视化流程 - 学习笔记
第4章数据可视化流程 4.1 数据可视化流程以数据流向为主线,其主要模块包括数据采集.数据处理和变换.可视化映射和用户感知. 4.2 数据处理和数据变换 4.2.1 数据滤波数据滤波器在信号处理 ...

第四章 CSS的深入学习