【CSS】CSS
css层叠样式表
注释
/*这是注释*/
插入样式表
1.外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2.内部样式表
<style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style>
3.内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先级
内联>内部>外部>浏览器默认
选择器
id选择器
id="para1"
#para1{}
class选择器
class="center"
.center{}
后代选择器，以空格分隔
div p{}
子元素选择器，>
div>p
相邻兄弟选择器，+
div+p
后续兄弟选择器，~
div~p
属性选择器
[title]{} 包含title的所有元素
[title=run]{} title值为run的所有元素
value 是完整单词" 类型的比较符号: ~=, |=
[attribute~=value] 属性中包含独立的单词为 value，如
title="tulip flower"
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开，并且以value开头 如
<p lang="en"> <p lang="en-us">
"拼接字符串" 类型的比较符号: *=, ^=, $=
[attribute*=value] 拆出value
[attribute^=value] 前有value
[attribute$=value] value结尾
优先级
!important>内联>id选择器>类选择器>元素选择器>通用选择器
伪类，表示选择元素的当前状态
anchor伪类
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
tip：
- LOVE-HATE原则
- 可跟css类配合使用<a class="red" href="css-syntax.html">CSS 语法</a> a.red:visited {color:#FF0000;}
伪元素
::before
::after
背景
文本
字体
列表
ul li无序列表
ol li有序列表
list-style-image:url('sqpurple.gif');
list-style-position: inside放到文本以内|outside默认值，文本以外;
list-style-type:disc默认实心圆|cicle空心圆|square实心方块|decimal数字|
其他样式看https://www.runoob.com/cssref/pr-list-style-type.html
边框
border:5px solid red;
border-style:solid实线|dotted点线|dashed虚线|double|groove沟槽边框|ridge脊边框|inset嵌入边框|outside突出边框
轮廓
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline:2px solid red;
尺寸
height
width
lline-height
max-height:元素最大高度
min-height:元素最小高度
max-width:元素最大宽度
min-width:元素最小宽度
显示
display:none;隐藏元素，且隐藏的元素不会占用任何空间。
visibility:hidden;隐藏元素，但是还占用未隐藏之前一样的空间
定位
position:static默认，静态定位元素
fixed相对于浏览器窗口固定，与文档流无关，不占据空间
relative相对定位元素，相对其正常位置，可移动，但它原本所占的空间不会改变
absolute绝对定位元素，相对于最近的已定位父元素，如果没有则相对于html，与文档流无关，不占据空间
sticky粘性定位，基于用于的滚动位置来定位，在 position:relative 与 position:fixed 定位之间切换
z-index:11 指定元素堆叠顺序，高堆叠顺序的元素总在低的之前。
cursor:pointer; 光标移动元素时候的样式
布局
overflow控制内容溢出元素时对应的元素区间内添加滚动条
visible默认值，溢出不会修建，呈现在元素框之外
hidden 内容会被修建，其余内容不可见
scroll 内容会被修建，但是浏览器会显示滚动条以便查看
auto 如果内容被修建，则显示滚动条
浮动
使元素向左或向右移动，其周围的元素也会重新排列。
一个浮动元素尽量会向左或向右，直到它的外边缘碰到包含框或另一个浮动框的边框位置。
浮动元素之后的元素会围绕他，之前的不受影响。
float:left|right
清除浮动
clear:both|left|right
解决子元素溢出就在父元素上添加（如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出）
overflow: auto;
对齐
元素水平居中 margin:auto;若要实现垂直也居中，可以父元素position: relative;子元素 position: absolute;top: 0; right: 0; bottom: 0; left: 0;margin: auto;触发流体特性
文本水平居中 text-align
图片居中对齐 display: block; margin: auto;
定位方式position: absolute;
垂直居中padding+text-align: center
垂直居中line-height
垂直居中position+transform
.center { height: 200px; position: relative; border: 3px solid green; }
.center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
浙公网安备 33010602011771号