css
css的引入方式
基本引入与基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1 按标签名选择,所有p标签设置属性*/ p{ color: red; } /*为所有div标签设置属性*/ div{ background-color: green; } /*2 按id属性选择*/ #c1{ font-size: 40px; } /*3 按class属性选择*/ .c2{ background-color: rebeccapurple; } /*所有内容的属性*/ *{ color: red; } </style> </head> <body> <p class="c2">hello1</p> <p id="c1">hello2</p> <p class="c2">hello3</p> </body>
组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*!*1 后代选择器*!*/ .outer p{ color: red; } /*2 子代选择器*/ .outer>p{ color: red; } .outer .c2 p{ color:red; } /*3 多元素选择器*/ .outer>p,.c3{ color: red; }
/*4 “+” 毗邻选择器 相邻下方的第一个标签为p的*/
.outer+p{
color:red;
}
/*5 且关系选择器 p标签且class = c1*/
p.c1{
color:red;
}
</style> </head> <body> <div class="outer"> <p>P</p> <div class="c2"> <p>PP</p> </div> </div>
<p class="c1">ppp</p>
<div class="c3">P</div> </body> </html>
#补充
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.c1{ color:red; } .c2{ background-color: rebeccapurple; } .btn{ width: 30px; height: 60px; background-color: darkgrey; opacity: 0.5; font-size: 22px; color: white; text-align: center; line-height: 60px; margin-top: 10px; } .left{ color: red; } </style> </head> <body> <div class="c1">DIV</div> <!--多个名字的使用方法，含有大多数相同属性的标签--> <p class="c1 c2">PPP</p> <p class="c2">PPPPPPP</p> <div class="c2">DIV</div> <div class="btn left "> > </div> <div class="btn rigt"> < </div> </body> </html>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*属性选择器*/ /*两个key为egon的都会变红*/ [egon]{ color:red; } /*只有key=egon value=ooo的会变字体*/ [egon="ooo"]{ font-size: 50px; } /*标识key等于egon，value等于ooo且含有属性key为alex的*/ [egon="ooo"][alex]{ color: blue; } div[egon]{ color: green; } </style> </head> <body> <p egon ="xxx">p1</p> <p egon = "ooo" alex ="sb">p1</p> <div egon="ooo">p2</div> </body> </html>
伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*连接点击前的状态*/ a:link{ color:green; } /*悬浮状态*/ a:hover{ color:yellow; } /*点击为放开的状态*/ a:active{ color: gray; } /*点击过的状态*/ a:visited{ color: blue; } </style> </head> <body> <a href="">helloworld</a> </body> </html>
对hover的拓展使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100%; border: 1px solid red; } .c2{ width: 100px; height: 200px; background-color: red; } /*悬浮在c1区域 对c2进行变化*/ .c1:hover .c2{ background-color:yellow; } </style> </head> <body> <div class="c1"> <div class="c2"> </div> </div> </body> </html>
优先级
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""－－－－－－－－－－－－1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id的权重为100，class的权重为10，标签的权重为1，将选择器的所有权重相加，最多的为优先级高 id>class>element*/ #d2{ color:green; } p{ color: red; } </style> </head> <body> <p class="c1" id="d2"> </p> </body> </html>
属性操作
颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
◾十六进制值 - 如: ＃FF0000
◾一个RGB值 - 如: RGB(255,0,0)
◾颜色的名称 - 如: red
p { color: rebeccapurple; }
水平对齐方式
text-align 属性规定元素中的文本的水平对齐方式。
◾left 把文本排列到左边。默认值：由浏览器决定。
◾right 把文本排列到右边。
◾center 把文本排列到中间。
◾justify 实现两端对齐文本效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css</title> <style> h2 {text-align:center;} p.publish_time {text-align:right;} p.content {text-align:justify;} </style> </head> <body> <h1>CSS text-align 水平居中</h1> <p class="publish_time">2017 年 5 月 17 号</p> <p class="content"> 只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声 音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p> <p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p> </body> </html>
文本的其他属性
font-size: 10px;
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
font-family: 'Lucida Bright'
font-weight: lighter/bold/border/ 800px 粗体
font-style: oblique 斜体
text-indent: 150px; 首行缩进150px
letter-spacing: 10px; 字母间距
word-spacing: 20px; 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
背景属性
◾background-color 背景颜色
◾background-image 背景图片
◾background-repeat 平铺
◾background-position 定位
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;
vertical-align属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*图片与文字对齐基线*/ img{ vertical-align: middle;/*中线*/ /* baseline; !*基线*!*/ /* top:顶线*/ /*bottom 底线*/ /*vertical-align: -5px;字体往下移*/ } </style> </head> <body> <div class="c1"> title: <img src="1.png" alt=""> </div> </body> </html>
结果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px;/*标签宽度*/ height: 300px;/*标签高度*/ background-color: wheat;/*标签背景颜色*/ color: #53868B;/*字体颜色*/ text-align: center;/*文本居中*/ line-height: 300px;/*行间距*/ } .btn{ width: 60px; height: 90px; background-image: url(路径);/*背景图片*/ color:white; font-size: 32px;/*字体大小*/ text-align: center; line-height: 90px; } </style> </head> <body> <div>Yuan</div> <div class="btn"> < </div> </body> </html>
display属性
◾none 隐藏
◾block 内联设置为块级
◾inline 块级设置为内联
◾inline-block 块级内联
display：none
注意与visibility:hidden的区别：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
边框属性
边框样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 200px; height: 200px; /*border-style: solid;*/ /*border-width: 10px;*/ /*border-color: red;*/ border: solid red 2px; border-radius: 20%; } </style> </head> <body> <div class="c1">sadfsda</div> </body> </html>
css定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。
CSS position 属性
通过使用position属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
- static
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative
- 不脱离文档流元素相当于原来的位置进行偏移某个距离即参照物为自己原本的位置。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- absolute
- 元素框从文档流完全删除，参照物为已定位的父级标签即父级标签含有position属性，父级没有定位，继续上找，直至body。
- 一般使用：1，给某些元素进行定位：设置absolute；
- 2，改定位标签的父元素设置相对定位（不必偏移）；
- fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身，完全脱离文档流 top，left，right，bottom
fixed的应用
#固定在可视窗口不随滚动条动（返回顶部按钮）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:100%; height: 2000px; background-color: wheat; } .returnTop{ width: 120px; height: 40px; background-color: gray; color: white; text-align: center; line-height: 40px; position: fixed;/*固定在可视窗口的某处*/ right:20px; bottom: 20px; } </style> </head> <body> <div class="c1"></div> <div class="returnTop"></div> </body> </html>
相对定位
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对定位会按照元素的原始位置对该元素进行移动。</p> <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p> <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p> </body> </html>
绝对定位
<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p> </body> </html>
注：绝对定位与相对定位的区别在于相对定位虽然不会改变元素的形状，他原本所占的空间仍保留。绝对定位不会改变元素的形状，原本所占的空间被释放。
固定定位
<html> <head> <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } </style> </head> <body> <p class="one">一些文本。</p> <p class="two">更多的文本。</p> </body> </html><html>
#对于固定高度长度的元素，内容可能会出现溢出的情况，利用overflow属性来处理溢出。
<head> <style type="text/css"> div { background-color:#00FFFF; width:150px; height:150px; overflow: hidden;/*隐藏溢出内容*/
overflow: scroll;/*溢出内容自动添加滚动条*/
overflow: auto;/*浏览器自动处理溢出内容*/
} </style> </head> <body> <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p> <div> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 </div> </body> </html>
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
浮动示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .c1{ width: 100px; height: 170px; background-color: #53868B; float: left; } .c2{ width: 200px; height: 70px; background-color: cornflowerblue; float: left; } .c3{ width: 300px; height: 120px; background-color: darkmagenta; float: right; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
