CSS笔记
学习来自菜鸟教程！！！https://www.runoob.com/css/css-background.html
1、背景
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片重复
background-attachment 背景图片是否移动
background-position 背景图片初始位置
background 以上属性简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> </head> <style> body { background-color: pink; background-image: url('imgs/img_tree.png'); /* 不复制*/ background-repeat: no-repeat; /* 固定*/ background-attachment: fixed; /* 右上*/ background-position: right top; } </style> <body> </body> </html>
2、类选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 选p中类为center的元素 */ p.center { text-align: center; } /* 选所有类为center1的元素 */ .center1 { text-align: center; } </style> </head> <body> <h1 class="center">这个标题不受影响，类center</h1> <p class="center">这个段落居中对齐，类center</p> <h2 class="center1">这个标题居中对齐，类center1</h1> <p class="center1">这个段落居中对齐，类center1</p> </body> </html>
3、文本
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 取消下划线 */ a { text-decoration: none; } h1 { /* 居中对齐 */ text-align: center; color: cadetblue; } h4 { /* 头上线 */ text-decoration: overline; } h2 { /* 删除线 */ text-decoration: line-through; } h3 { /* 下划线 */ text-decoration: underline; } p.date { /* 右对齐 */ text-align: right; } p.main { /* 两端对齐 */ text-align: justify; } </style> </head> <body> <h1>居中对齐</h1> <p class="date">2015 年 3 月 14 号</p> <p class="main"> “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。” </p> <p><b>注意：</b> 重置浏览器窗口大小查看 "justify两端对齐" 是如何工作的。</p> <p>取消下划线的链接: <a href="https://www.runoob.com/css/css-text.html">https://www.runoob.com/css/css-text.html</a></p> <h4>头上线</h4> <h2>删除线</h2> <h3>下划线</h3> </body> </html>
其他属性参考大佬网址https://www.runoob.com/css/css-text.html
4、块元素与内联元素
块级元素(block)特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小; 块级元素主要有： address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li 内联元素主要有： a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var 可变元素(根据上下文关系确定该元素是块元素还是内联元素)： applet ,button ,del ,iframe , ins ,map ,object , script
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="width: 500px; background-color: yellowgreen;">div内容，默认是块元素，即使给定宽度，也会换行</div> <div style="width: 500px; background-color: yellowgreen;"></div>div内容，默认是块元素，即使给定宽度，也会换行</div> <br> <div style=" background-color: yellowgreen;display: inline;">div内容，改为内联元素，不会换行</div> <div style=" background-color:aqua; display: inline;">div内容，改为内联元素，不会换行，不需要给定宽度，宽度自适应</div> </body> </html>
5、定位position
可选项：
static 默认值，遵循正常的文档流对象，即自上而下，从左到右的布局，不会受到 top, bottom, left, right 影响
fixed 元素的位置相对于浏览器窗口是固定位置，与文档流无关，不占据空间，可重叠,受到 top, bottom, left, right 影响
相对于窗口或自身，如图示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="position: static;">默认定位模式static</div> <div style="position: static;">默认定位模式static</div> <div style=" width: 500px;background-color: aqua; position: fixed;top: 80px;left: 20px;">fixed模式，固定于窗口</div> <div style=" width: 300px;background-color: aqua; position: fixed;top: 100px;left: 20px;">fixed模式，固定于窗口</div> <div style="background-color: aqua; position: relative;top: 120px;left: 20px; ">relative模式，相对自身位置</div> <div style="background-color: aqua; position: relative;top: 140px;left: -20px; ">relative模式，相对自身位置</div> <div style="background-color: pink; position: absolute;top: 120px;left: 20px; ">absolute模式，相对于父元素</div> <div style="background-color: pink; position: absolute;top: 140px;left: -20px; ">absolute模式，相对于父元素</div> </body> </html>
6、内容溢出元素框时显示方式
overflow可选项
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style=" height: 100px;width: 200px;overflow: auto; float: left;"> <p>多余自动添加滚动条</p> <p>多余自动添加滚动条</p> <p>多余自动添加滚动条</p> <p>多余自动添加滚动条</p> <p>多余自动添加滚动条</p> </div> <div style=" height: 100px;width: 200px;overflow: hidden; float: left;"> <p>多余自动裁剪丢弃</p> <p>多余自动裁剪丢弃</p> <p>多余自动裁剪丢弃</p> <p>多余自动裁剪丢弃</p> <p>多余自动裁剪丢弃</p> </div> <div style=" height: 100px;width: 200px;overflow: scroll; float: left;"> <p>直接添加滚动条</p> <p>直接添加滚动条</p> <p>直接添加滚动条</p> <p>直接添加滚动条</p> <p>直接添加滚动条</p> </div> <div style=" height: 100px;width: 200px;overflow: visible;float: left;"> <p>出现在元素框外</p> <p>出现在元素框外</p> <p>出现在元素框外</p> <p>出现在元素框外</p> <p>出现在元素框外</p> </div> </body> </html>
7、浮动
float可选项
left
right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="width: 500px;background-color: aqua;">div块元素</div> <div style="width: 500px;background-color: chartreuse;">div块元素</div> <div style="width: 500px;background-color:aqua;float: left;">div float实现内联元素</div> <div style="width: 500px;background-color: chartreuse;float: left;">div float实现内联元素</div> </body> </html>
8、对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="width: 500px;margin: auto;background-color: aqua;">div元素居中对齐</div> <div style="width: 500px;margin: auto;background-color:burlywood;text-align: center;">div元素文本居中对齐</div> </body> </html>
