学习资料：《CSS菜鸟教程》

学习目标：熟悉CSS语法即可

CSS简介

什么是CSS？
- CSS（Cascading Style Sheets）层叠样式表
- CSS定义了如何显示HTML元素
- 样式通常存储在样式表中
- 多样式定义可层叠为一个

CSS语法

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>p{color: red;text-align: center;}/* css注释 */</style></head><body><p>heihei</p></body>
</html>

CSS语法由选择器和多条声明构成
CSS声明总是以；结尾，用{}括起来
注释和C++一样

CSS ID和选择器

<style>#testparam{text-align: center;color: red;}.classtest{text-align: center;color: yellow;}
</style>

id 和 class功能上差不多，但id是唯一的
知乎查了具体的不同，比较多的说法是：id给js用，class给css用

CSS创建

样式表创建的三种方法（上面提到过）

外部样式表

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><link href="mycss.css" rel="stylesheet" type="text/css"></head><body><testcss> oo  </testcss></body>
</html>

内部样式表：把mycss.css的内容全部拷贝到<head>里来
内联样式：通过style指定属性

多重样式

同名的选择器定义，内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式

CSS 背景

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>h1{background-color: yellow;background-image: url('testimage.png');background-position: left top;background-repeat: no-repeat;}</style></head><body><h1> haha </h1></body>
</html>

通过在head定义style标签，通过css对h1进行渲染

css文本格式

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>h1{text-align: center;}p.data{text-align: right;}p.main{text-align: justify; /*左右对齐*/}a{text-decoration:none; /*去除下划线，也可以加下划线，文本居中下划线*/}p.upperletter{text-transform: uppercase;}p.lowerletter{text-transform: lowercase;}p.cap{text-transform: capitalize;}p{text-indent: 50px;}</style></head><body><h1> 标题居中 </h1><p class="upperletter">small small </p><p class="lowerletter">SMALL </p><p class="cap">small small </p></body>
</html>

p.classname，专属标签p，在p的class里引用
- 对于p.classname这种形式的style，是选择性的，可以在body内做选择，需要的时候通过class属性指定
- 对于在head内直接改p的属性，是覆盖了标签<p>的默认属性值
p{}直接修改标签p

CSS 字体

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>p.normal{font-family: serif;font-style: normal;font-size: 32px;}p.italic{font-style: italic;font-size: 2.0em;}</style></head><body><h1> 标题居中 </h1><p class="normal">small small </p><p class="italic">SMALL </p></body>
</html>

font-size：16px = 1.0em，em在浏览器上的兼容性更好
字体有斜体和normal

CSS链接

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>a:link{color: black;text-decoration: underline;background-color: black;}a:visited{color: brown;}a:hover{color: coral;text-decoration: underline;background-color: yellow;}a:active{color:cornflowerblue;}</style></head><body><a href = "http:www.baidu.com" > 百度 </a></body>
</html>

链接样式定义，顺序要固定：link visited hover active

CSS列表

ul是无序
ol是有序
通过ul.classname或者ol.classname，可以给HTML元素的class属性赋值做到表现差异化

CSS表格

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>table,th,td{border: 1px solid;/* border-collapse: collapse; 折叠边框 */width: 200px;height: 100px;text-align: right;vertical-align: top;padding: 20px;color:yellow}</style></head><body><table><th > 表头1 </th><th> 表头2 </th><tr><td>(1,1)</td><td>(1,2)</td></tr><tr><td>(2,1)</td><td>(2,2)</td></tr></table></body>
</html>

border属性定义，简写的写法； border width,border-style,border-color

CSS盒子模型

CSS边框

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>p.one{border-style: solid;border-width: 10px;border-color: black;border-left-style: dotted;border-left-color: yellow;}</style></head><body><p class = "one"> one </p></body>
</html>

CSS轮廓

/* CSS轮廓 */
outline-color: green;
outline-style: dotted;
outline-width: 30px;

嵌套选择器

p{ }: 为所有 p 元素指定一个样式
.marked{ }: 为所有 class="marked" 的元素指定一个样式
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式

块和内联

块重新起一行，内联元素不重起一行

CSS Position

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>p.fixed{position: fixed; /* 相对于浏览器位置固定 */}p.posleft{position: relative;left: -20px; /* 相对原位置往左偏移20px */}p.sitcky{position: sticky;/* 粘性定位 */top: 50px;color: white;/* 覆盖，类似z-buffer */z-index: 1;}</style></head><body><p class = "sitcky"> fixed </p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p></body>
</html>

CSS 布局OverFlow

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>div.overflowtest{overflow: scroll;height : 100px;background-color: green;}</style></head><body><div class = "overflowtest"><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p></div></body>
</html>

CSS组合选择器

组合选择器描述了两个选择器的关系

后代选择器(以空格分隔)
- h1 h2，所有在h1的h2，都执行对应的CSS样式
子元素选择器(以大于 > 号分隔）
- h1>h2 ，h2在h1的内部第一层，则被选中
相邻兄弟选择器（以加号 + 分隔）
- h1+h2 h2后一个兄弟h1，则被选中
普通兄弟选择器（以波浪号～分隔）
- h1 ~ h2，h1之后的所有h2兄弟，则被选中

CSS伪类

伪类用于添加选择器的特殊效果

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>/* p:first-child 匹配第一个 <p> 元素 *//* { *//* color: yellow; *//* }  *//* p>i:first-child  /* 匹配所有<p> 元素中的第一个 <i> 元素 *//* {color: blue;} */ */p:first-child i{color: green;}</style></head><body><div><p>滚<i>动</i><i>动</i>            </p><p>来回滚动<i>我</i></p><p>滚动我</p><p>来<i>回</i><i>滚</i>动我</p><p>滚动我</p><p>来回滚动我</p></div></body>
</html>

CSS 伪元素

添加一些选择器的特殊效果

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>/* p:first-line{color: green;}p:first-letter{color: yellow;} */p:before{content: url(66.png);}p:after{content: url(66.png);}</style></head><body><p> hahah </p></body>
</html>

伪类和伪元素的异同

都是fake
伪元素是元素，类是类。前者和元素是平级关系，类是包含在元素中

CSS 导航栏

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>ul{list-style-type: none; /*列表标记*/margin: 0;padding: 0;width: 25%;height: 100%;position: fixed;}    a{display: block; /*可点击区域*/background-color: yellow;width: 40px;}a:hover{background-color: black;}li{border: 1px solid;}</style></head><body><ul><li><a href="hah">test1</a></li><li><a href="hah">test2</a></li><li><a href="hah">test3</a></li><li><a href="hah">test4</a></li></ul><div style="margin-left:25%;padding:1px 16px;height:100%;"><h2>Fixed Full-height Side Nav</h2><h3>Try to scroll this area, and see how the sidenav sticks to the page</h3><p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p><p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p><p>Some text..</p></div></body>
</html>

左侧是全屏高度，右侧是可滚动的
通过fix固定，通过margin-left通过比例做隔离

CSS 下拉菜单

当鼠标移动到指定元素上时，显示下拉菜单

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>.dropdown{display: inline-block;position: relative;}.dropdown-content {display: none;background-color:white;max-width: 160px;}.dropdown:hover .dropdown-content{display: block;}</style></head><body><div class="dropdown"><span>鼠标移动到我这！</span><div class="dropdown-content"><p>菜鸟教程</p><p>www.runoob.com</p></div></div></body>
</html>

.dropdown 没被隐藏，被作为父标签的class，当鼠标放在父标签的内容上时，.dropdown:hover就被触发了，然后.dropdown-content的display: block;

CSS图像拼接

客户端发送多个请求到服务器，比较浪费性能，耗时久。不如直接一次性把所有图片发下来，客户端做切割显示

img.home {width: 46px;height: 44px;background: url(/images/img_navsprites.gif) 0 0;
}

CSS媒体类型

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>@media screen{p.test {font-family:verdana,sans-serif;font-size:1px;}}@media print{p.test {font-family:times,serif;font-size:100px;}  /* 打印模式 */}</style></head><body><p class="test">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p></body>
</html>

CSS计数器

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>body{counter-reset: section;}p::before{counter-increment: section;content: "Section " counter(section) ":";   }</style></head><body><p> test1 </p><p> test2 </p><p> test3 </p></body>
</html>

CSS网页布局

<!DOCTYPE html>
<html><head><title> HTML教程 Fighting!!! </title><style>.header{text-align: center;font-size: 50px;color: green;background-color: black;margin:  50px;}.topnav{background-color: #333;}.topnav a{background-color: ;text-align: center;padding: 20px;color: green;}</style></head><body><div class = "header">头部区域</div><div class = "topnav"><a href = "http::www.baidu.com"> test1 </a><a href = "http::www.baidu.com"> test2 </a></div></body>
</html>

通过样式，在body内指定类，指定类里的某个标签，通过父级应该子级

总结：通过在<style></style>中，添加类声明，对HTML的元素进行自定义渲染

《CSS菜鸟教程》学习相关推荐

【SQL学习笔记】《SQL进阶教程》1.1
SQL进阶教程学习笔记1.1 1-1case 表达式将已有编号方式转换为新的方式并统计 SELECT CASE pref_nameWHEN '辽宁' THEN '东北'WHEN '福建' THEN ...
【SQL进阶教程】第一章 case表达式
本系列基于<SQL进阶教程>(如下图)学习,实现了书中代码及练习题代码.PS:电子书请大家各自默默脚本之家. [知识点1]case表达式概述 Case表达式有简单case表达式和搜索cas ...
SQL基础教程学习第六站：数据更新
仅用于记录学习,欢迎批评指正,共同交流,共同进步,大神勿喷系列文章 SQL基础教程学习第一站:PostgreSQL下载安装以及如何创建并登录数据库: SQL基础教程学习第二站:数据库基本知识: SQ ...
SQL进阶教程—自链接的用法
用法 https://moonshuo.cn/posts/14085.html 可重排列,排列,组合需求:现在我需要将这个水果的品种各个组合起来,构成一个有序对的组合在这个过程中首先执行完毕fro ...
SQL进阶教程—CASE表达式
所有的文件在SQL进阶教程 (ituring.com.cn),随书下载那里概述文章原址基本写法简单CASE表达式 SELECT CASE 列名称WHEN 匹配字符 THEN 转换字符WHEN ...
SQL数据库教程-学习笔记2
SQL数据库教程-学习笔记2 文章目录 SQL数据库教程-学习笔记2 三.DML语言的学习 1.插入语句:insert into 2.修改语句:update 3.删除语句:delete 4.练习题四 ...
【SAP Hana】X档案：SAP HANA SQL 进阶教程
SAP HANA SQL 进阶教程 5.HANA SQL 进阶教程 (1)Databases (2)User & Role (3)Schemas (4)Tables (5)Table Inde ...
【SQL学习笔记】《SQL进阶教程》1.2
1-2自连接的用法自连接+非等值连接自连接+GROUP BY = 递归集合表是行的集合,面向集合开销较大唯二重要的方法 CASE 自连接 SQL语言 : 面向集合的特性可重排列.排列.组合 ...
SQL进阶教程——用SQL进行集合运算（第七章）
1. 前言集合论是SQL语言的根基--这是贯穿全书主题之一.因为他的这个特性,SQL也被称为面向集合语言.只有从集合的角度思考,才能明白SQL的强大. 但是,实际上这一点长期以来都被很多人忽略了.造 ...
SQL进阶教程 | 史上最易懂SQL教程 5小时零基础成长SQL大师
目录第一部分:基础--增删查改 [第一章]做好准备 Getting Started (时长25分钟) [第二章]在单一表格中检索数据 Retrieving Data From a Single Ta ...

《CSS菜鸟教程》学习