CSS语言笔记
Cascading Style Sheets(级联样式表)
CSS是一种样式表语言，用于HTML文档的控制外观，定义布局。
HTML与CSS关系：
HTML是网页内容
CSS是网页样式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.p1{color: red;font-size: 24px;font-family: 楷体;background-color: aquamarine;}</style></head><body><!--css为html标签修饰外观--><!--a href=""><font color="red"><b>百度</b></font></a>--><!--a href="" style="color: red;font-size: 20px">百度</a--><a href="" class="p1">百度</a><a href="" class="p1">搜狐</a><a href="" class="p1">新浪</a><br /><a class="p1">QQ浏览器</a></body>
</html>选择器优先级
<head><meta charset="utf-8" /><title></title>
<style>/*css注释内嵌样式表*/.t1{color: blue;}/*类选择器*/a{color: blue;}p{color: red;}/*通配选择器*/*{font-size: 15px;}/*id选择器 唯一的*/#aid{color: chocolate;}/*选择器优先级匹配标签越多，优先级越低，重叠选中标签时，使用优先级高的样式，但低优先级与高优先级没有重叠的样式也会添加上去*/</style>
</head><body><!-- 行内样式表，只对所在标签进行修饰，优先级最大。行内样式表>aid选择器>类选择器>标签选择器>通配选择器.--><a href="" style="color: black;font-size: 20px;font-family: 楷体;" class="t1" >腾讯</a><a href="" id="aid">新浪</a><a href="" >微博</a><p>段落1</p><p>段落2</p></body>
</html>
css里的部分文本
<html><head><meta charset="utf-8"><title></title><style>.p1{color: #C6EB94;font: size 20px;/* px是像素单位，css中的尺寸需要加单位*/font-family: 楷体;font-weight: 700;/*加粗*//*text-align: center; 文字水平对齐*/font-style: italic;/*斜体文本*//* text-decoration: underline; 修饰文本下添加下划线*//*text-decoration: line-through; 修饰文本 添加删除线*//*line-height: 50px;控制行高*//*letter-spacing: 20px;控制字符单词间距*//*word-spacing: 20px;控制英文单词间距*/text-indent: 2em;/*text-indent: 2em; em当前文本中一个字符的大小的像素*/}a{text-decoration: none;}/*控制字符被鼠标指示后的浮动变化。*/a:hover{text-decoration: underline;color: #C6EB94;} </style></head><body><p class="p1">列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。列表属性可以放置，改变列表项标志，或者将图标作为列表项标志。</p><a herf="">百度1</a><a herf="">百度2</a><a herf="">百度3</a><a herf="">百度4</a></body>
</html>段落背景和列表
1.段落背景：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p{background-color: aqua;width: 900px;height: 900px;background-image: url(img/rw.png) ;/*添加背景图片*/background-repeat:no-repeat;/*背景不重复*/background-position: center ;/* 背景位置 水平（left center right ）垂直（top bottom ） */}</style></head><body><p>段落标签</p></body>
</html>2.列表：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/*后代选择器 对某个父类标签下的子类进行修饰*/.u1 li{color: aqua;list-style-type: none;/*控制列表前的排序标志符号*/list-style-image: url(img/rw1.png);/*在列表前的标志改为图标*/list-style-position: inside;/*图标位置 是在列表里面还是列表外面（inside outside）*//*list-style: none outside url(img/rw1.png); 对列表项一种简写的修饰方式*/}</style></head><body><ul class="u1"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul><ul class="u2"><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul></body>
</html>css伪类和图片透明度：
鼠标移入移出标签以及相应操作时，标签发生特殊变化。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>a{color: aqua;}/*当鼠标移动到选择器对应的标签时，自动切换到此样式表*/a:hover{color: red;font-size: 20px;}/*当鼠标点击选择器对应的标签时，自动切换到此样式表*/a:active{color: blue;}p:hover{color: red;background-color: aqua;}p:active{color: blue;}.both:hover{background-color: blue;}.both:active{background-color: crimson;}/*当拥有输入功能的标签，获得鼠标焦点时，自动切换到此样表达式*/input:focus{background-color: aquamarine;}img{opacity: 0.5;}img:hover{opacity: 1;/*图片透明度范围为0-1.0*/}</style></head><a href="">百度</a><p>段落</p><input type="button" value="保存" class="both"/><br /><input /><br /><input /><br /><input /><br /><input /><br /><img src="img/rw.png"/></body>
</html>块级，行级，行级块标签
1.块级标签：无论内容多少 都会独自占据一行的。
2.行级标签：只占自身大小的标签，不会占一行。
3.行级块标签：不占一行，又可以设置宽高.
div和span:
块级标签和行级标签中的两个纯净标签；
1.块级:div.
2.行级:span.
display:
可以修饰标签的类型
1.block：改为块级标签
2.inline：改为行级标签
3.inline-block：改为行级块标签
4.none：改为空标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 块级标签:可以设置宽高,主要用来进行网页的布局.例如 p h1-h6其中div是一个纯洁的块级标签,没有任何附加样式，我们给它设置什么样式，它变为什么样式。--><!--display:特定条件下可以修饰标签的类型.1.block：改为块级标签2.inline：改为行级标签 3.inline-block：改为行级块标签 4.none：改为空标签--><p style="background-color: chartreuse; ">aaa</p>ppp<h1 style="display: inline;">bbb</h1><div style="background-color: chartreuse; width: 200px;height: 200px; display: inline-block;">div是一个纯洁的块级标签</div><!--行级标签:只占内容的大小，不会占一行，设置宽高也无效，例如a b s i主要用来对网页上的文字进行修饰。span是一个纯洁的行级标签，对网页上的文字进行选中，修饰。--><a href="" style="width: 100px;height: 100px;">cccc</a><s style="display:block;">BBBB</s><span style="color: red; text-decoration: underline;">DDDD</span><!--常用标签 div span a 表格 表单 列表--><!--行级块标签：不占一行，又可以设置宽高--><img src="img/rw.png" width="50" height="50"/><br /><input style="width:50px ; height:10px;"/></body>
</html>盒子模型：
盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。 每个盒子分为了4个区域： 内容区：放内容的区域， 内边距：内容区到外边的距离， 边框：标签的最外层， 外边距：一个标签距离另一个标签之间的距离。
标签大小：内容区+内边距+外边距的大小。
设置内容区和内边距：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: aqua;/*width和height仅仅只是设置内容区的大小，不是标签的大小标签大小是内容区大小+内边距+外边距的大小。*/width: 100px;height: 100px;/* 设置内边距 padding- /padding *//*padding:10px;*//*简化padding: 5px 10px 15px 20px; 上 右 下 左padding:10px 20px; 上下 左右 */}.box1{width: 65px;height: 25px;padding: 10px 25px;background-color: greenyellow;}.box2{width:270px;height: 70px;padding: 15px 65px;background-color: red;}</style></head><body><!--盒子模型，每个标签都想一个盒子，网页布局其本质就是摆放盒子。每个盒子分为了4个区域：内容区：放内容的区域，内边距：内容区到外边的距离，边框：标签的最外层，外边距：一个标签距离另一个标签之间的距离。--><div class="box">A</div><div class="box1">新闻热点</div><div class="box2"><img src="img/ffyc.png" style="display: block;"/> </div></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{/*去掉所有标签默认的外边距和内边距。*/margin: 0px;padding: 0px;}/*body{margin: 0px;默认会有8px的外边距，此处去除body标签默认外边距。}*/.box{background-color:aqua;width: 180px;height: 180px;margin-top: auto;}.box1{background-color:red;width: 180px;height: 180px;/*margin设置外边距。margin-top: 10px;margin-left: 10px;*/margin: 10px;}.box2{background-color:greenyellow;width: 180px;height: 180px;/*auto设置距离为自动最大左右都为auto时，标签只有居中，才会左右都最大。上下的外边距不能设置为自动，设置自动时为0，*/margin-left: auto;margin-right: auto;margin-top: 10px;margin-bottom: 10px;} </style></head><body><div class="box">盒子模型</div><div class="box1">盒子模型1</div><div class="box2">盒子模型2</div></body>
</html>文档流
文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
网页布局就是打破默认的文档流。
浮动：
浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.nav{background-color: greenyellow;padding: 10px 30px;float: left;}</style></head><body><!--浮动：浮动会使标签脱离原来的文档流（默认的二维平面），悬浮起来。float:left/right/none;浮动后的标签不会占用原来文档流中的位置，下面的标签就会上移，跑到浮动标签的下面，影响后面网页的布局。--><div class="nav">新闻首页</div><div class="nav">体育新闻</div><div class="nav">科技前沿</div><div class="nav">娱乐快报</div><div style="clear: left;"></div><!--清除浮动--><div>abcd</div></body>
</html>定位
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
1.相对定位：
相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{background-color: red;width: 100px;height: 100px;position: relative;/*开启相对定位，以自己为参照物，不脱离原来的文档流*/left: 100px;}.box2{background-color: blue;width: 100px;height: 100px;}</style></head><body><div class="box1">div1</div><div class="box2">div2</div></body>
</html>2.绝对定位：
移动时的参照物：离他最近的 开启了定位的父级标签，如果所有父级标签都没开启定位，那么它以浏览器的边框为参照物。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box1{background-color: red;width: 100px;height: 100px;position: absolute;/*开启绝对定位，立即脱离原来的文档流*/left:100px;top: 100px;/*移动时的参照物：离他最近的 开启了定位的父级标签，如果所有父级标签都没开启定位，那么它以浏览器的边框为参照物。一般情况下开启另一个标签的绝对定位，父类一般开启相对定位。*/}.box2{background-color: blue;width: 100px;height: 100px;}.main{background-color: antiquewhite;width: 200px;height: 200px;position: relative;}</style></head><body><div class="main">div3<div class="box1">div1</div></div><div class="box2">div2</div></body>
</html>