/*这是注释*/
- 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
- 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
- 外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
# 元素选择器
p {color: "red";}
# ID选择器
#i1 { background-color: red; }
# 类选择器
.c1 { font-size: 14px; } p.c1 { color: red; }
注意：
- 样式类名不要用数字开头（有的浏览器不认）。
- 标签中的class属性如果有多个，要用空格分隔。
# 通用选择器
* { color: white; } 4|2组合选择器
# 后代选择器
/*li内部的a标签设置字体颜色*/ li a { color: green; }
# 儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
# 毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
# 弟弟选择器
/*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; } 4|4分组和嵌套
# 分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p { color: red; }
# 嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色
/* 未访问的链接 */ a:link { color: #FF0000 } /* 已访问的链接 */ a:visited { color: #00FF00 } /* 鼠标移动到链接上 */ a:hover { color: #FF00FF } /* 选定的链接 */ a:active { color: #0000FF } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; }
# first_letter
常用的给首字母设置特殊样式：
p:first-letter { font-size: 48px; color: red; }
# before
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }
# after
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }
before和after多用于清除浮动。
# 同种选择器，不同的引入方式
- 就近原则，从上到下，谁离得近谁说了算
# 不同选择器，相同的引入方式
- 行内样式 > id选择器 > 类选择器 > 标签选择器
- width属性可以为元素设置宽度。
- height属性可以为元素设置高度。
- 块级标签才能设置宽度，内联标签的宽度由内容来决定。
# 字体设置
- font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
例：
body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }
# 字体大小设置
p { font-size: 14px; }
- 如果设置成inherit表示继承父元素的字体大小值。
# 字体的粗细
- font-weight用来设置字体的字重（粗细）
# 文本颜色
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
- rgba(255,0,0,0.5)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间
- text-align 属性规定元素中的文本的水平对齐方式。
比较常用的：去掉a标签默认的下划线
a { text-decoration: none; }
# 首行缩进
将段落的第一行缩进48像素
p { text-indent: 32px; }
/*背景颜色*/ background-color: red; /*背景图片*/ background-image: url(‘1.jpg‘); /* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: left top; /*background-position: 200px 200px;*/ /*简写：*/ background:#336699 url(‘1.png‘) no-repeat left top;
可以通过background-attachment:fixed属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
- border-width 宽
- border-style 类型
- border-color 颜色
#i1 { border-width: 2px; border-style: solid; border-color: red; } /*一般使用简写方式*/ #i1 { border: 2px solid red; }
边框样式
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 { border-top-style:dotted; border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
- 用这个属性能实现圆角边框的效果。
- 将border-radius设置为长或高的一半即可得到一个圆形。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: red; border: 3px solid black; border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
- 用于控制HTML元素的显示效果。
display:"none"与visibility:hidden的区别：
- visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
原文：https://www.cnblogs.com/wangyisen/p/10946458.html
