28
社区成员
发帖
与我相关
我的任务
分享CSS笔记总结
一、编写位置
1.行内样式：写在标签的style属性中
<a style=""></a>
2.内部样式：
<style></style> //可以写在html的任何位置，一般写在<head></head>中
3.外部样式：要写单独的.css文件，在html文件中引入
<link rel=stylesheet" href="./xxx.css"> //写在<head></head>中
p { //xxx.css文件
color: ;
font-size: ;
}
4.优先级：
a.行内样式的优先级最高
b.内部样式和外部样式的优先级相同，写在后面的会覆盖写在前面的
c.同一个样式中，也是写在后面的(CSS)覆盖写在前面的(CSS)
二、选择器
1.通配选择器：可以选中所有的html元素
* {
}
2.元素选择器：选中所有同种标签
h2 {
}
3.类选择器：根据元素的class值，来选中某些元素
.类名 {
}
4.ID选择器：选中特定id值的那个元素
#xxx {
}
<标签 id="xxx"> //id区分大小写，不能有空格
5.交集选择器：
标签.类名#id { //id一般不写
}
6.并集选择器：
.类名,
.类名 {
}
7.后代选择器：选中指定元素中，符合要求的后代元素
选择器1 后代选择器2 {
}
8.子代选择器：选中指定元素中，符合要求的子元素
选择器1>子代选择器2 {
}
9.兄弟选择器：
选择器1+弟弟选择器2 { //只能选中后面紧紧相邻的元素
}
选择器1~兄弟选择器2 { //选中后面所有和兄弟选择器2同名的元素
}
10.属性选择器：
1.[title] { //选中具有title属性的元素
}
2.[title=" "] { //选中title值为特定值的元素
}
3.[title^=" "] { //选中title值以特定值开头的元素
}
4.[title$=" "] { //选中title值以特定值结尾的元素
}
5.[title*=" "] { //选中title值包含特定值的元素
}
11.伪类选择器：是元素特殊状态的描述
a. //必须按照lvha的顺序
a:link { //选中没有访问过的元素
}
a:visited { //选中访问过的元素
}
a:hover { //选中处于鼠标悬浮状态的元素
}
a:active { //处于激活状态(鼠标按下不松手)
}
b.动态伪类：
input:focus { //选中焦点，只用于表单类元素
}
c.结构伪类：
1.div>p:first-child { //选中既满足p又满足first-child
} //【first-child、last-child、nth-child(n)(n取0~+∞、an+b、odd、even)、nth-last-child(n)、only-child】
2.div>p:first-of-type { //选中p元素的第一个
} //【first-of-type、last-of-type、nth-of-type(n)、nth-last-of-type(n)、only-of-type】
3.:root { //选中的是根元素
}
4.div:empty { //选中的是没有内容的div元素
}
d.否定伪类：
div>p:not(.fail) { //选中div的儿子p元素，但排除类名为fail的
} //【.类名、[title=“ ”]、：first-child】
e.UI伪类：
1.input:checked { //选中的是勾选的复选框或单选按钮
}
2.input:disabled { //选中的是被禁用的input元素
} //【disabled、enabled】
3.div:target { //选中锚点指向的元素
}
f.语言伪类：
1.div:lang(en) { //选中div中语言为en的元素
}
2.:lang(en) { //选中所有语言为en的元素
}
12.伪元素选择器：伪元素不是元素，是元素中的一些特殊位置
1.div::first-letter { //选中开头第一个字母
} //【first-letter、first-、selection、placeholder】
2.p::before { //在p标签内容的前面创建子元素
} //【before、after】
13.优先级：!important>行内样式> ID选择器 > 类选择器 > 元素选择器 > 通配选择器>继承的样式
比较权重：(a，b，c)
a：ID选择器的个数
b：类、伪类、属性选择器的个数
c：元素、伪元素选择器的个数
(并集选择器的每一部分都是分开算的)
三、颜色
1.color: ;
2.rgb( , , );
3.rgba( , , );
4.HEX：#aabbcc;
5.HEXA：#aabbccddee；
6.HSL：hsl( deg, , );
7.HSLA：hsla( , , , );
四、字体
font-family: " "," ",sans-serif; //字体族。改变字体。sans-serif：非衬线字体
font-style: " "; //字体样式【normal、italic、oblique】
font-weight:" "; //字体粗细【lighter、normal、bold、bolder】
font: ; //复合属性。大小必须是倒数第二位，字体族必须是最后一位，各属性间用空格隔开
五、文本
letter-spacing: ; //字母间距
word-spacing: ; //单词间距
text-decoration: overline dotted red; //文本修饰。【overline、underline、line-through、none】【dotted虚线、wavy波浪线】
text-indent: ; //文本缩进。缩进单位为字体大小
text-align: ; //文本对齐水平。【left、center、right】
line-height: ; //文本对齐行高。值必须大于font-size、【像素、normal、倍数、百分比】
height=line-height //文本对齐垂直：居中
line-height = (height * 2) - font-size – x //文本对齐垂直：底部。x根据字体族变化
vertical_align: ; //文本对齐垂直。指定同一行元素之间，或表格单元格内文字的垂直对齐方式、【baseline、top、middle、bottom】
六、列表 //只能用于ul、ol、li
list-style-type: ; //【none、square(正方形)、lower-roman(小写罗马字)、upper-roman(大写)、decimal(数字)、disc(圆形)、lower-alpha(小写字母)、upper-alpha(大写)】
list-style-position: ; //列表符号在li的里外【inside、outside】
list-style-image: url("图片地址"); //自定义列表符号
list-style: ; //复合属性，顺序与效果无关
七、表格
border-width: ;
border-color: ;
border-style: ; //【solid(实线)、dashed(虚线)、dotted(点线)、double(双实线)】
table-layout: ; //表格独有属性。控制表格列宽【auto、fixed】
border-spacing: ; //控制单元格间距
border-collapse: ; //合并相邻单元格的边框【separate、collapse】
empty-cells: ; //隐藏无内容的单元格【show、hide】
caption-side: ; //标题位置【top、bottom】
八、背景
background-color: ;
background-image: url(" "); //背景图片
background-repeat: ; //【repeat、no-repeat、repeat-x(在水平方向重复)、repeat-y(在垂直方向上重复)】
background-position: ; //【left、top、center、right、bottom】
background: ; //复合属性
九、鼠标
cursor: ; //鼠标图标【pointer、move、wait、crosshair】
十、长度单位
1.px：像素
2.em：相对于当前元素或其父元素的font-size的倍数 //首行缩进2字符text-indent: 2em;
3.rem：相对于根元素的font-size的倍数
4.%：相对于其父元素的百分比
十一、元素的显示模式
display: ; //修改元素的显示方式【none(隐藏)、block、inline、inline-block】
1.块元素：独占一行，撑满父元素，高度由内容撑开
a.主体结构标签：<html>、<body>
b.排版标签：<h1>~<h6>、<hr>、<p>、<pre>、<div>
c.列表标签：<ul>、<ol>、<li>、<di>、<dt>、<dd>
d.表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
e.<form>与<option>
2.行内元素：不独占一行，宽度高度都由内容撑开，无法通过CSS设置宽高
a.文本标签：<em>、<strong>、<sup>、<sub>、<del>、<ins>、<br>
b.<a>与<label>
3.行内块元素：不独占一行，宽度高度都由内容撑开，可以通过CSS设置宽高
a.图片：< img>
b.单元格：<td>、<th>
c.表单控件：<input>、<textarea>、<select>、<button>
d.框架标签：<iframe>
十二、盒子模型
1.组成部分：
盒子大小=content+padding+border //margin只影响盒子位置
默认宽度：不设置width时元素呈现出来的宽度
总宽度=父的content-自身的左右margin
内容区宽度=父的content-自身的左右margin-border、padding
max-width: ;
min-width: ;
max-height: ;
min-height: ;
2.内边距padding：行内元素的上下边距会被占位
padding: 10px;
padding: 10px 20px; //上下，左右
padding: 10px 20px 30px; //上，左右，下
padding: 10px 20px 30px 40px; //上，右，下，左
3.边框border
border-width: ;
border-color: ;
border-style: ;
border-left-width: ;
border-right-width: ;
border-top-width: ;
border-bottom-width: ;
border-left: ;
border-right: ;
border-top: ;
border-bottom: ;
border: ;
4.外边距margin
margin: ;
margin-left: ;
margin-right: ;
margin-top: ; //对行内元素来说，上下margin无效
margin-bottom: ;
margin-left: auto;
margin-right: auto; //对块元素生效，水平居中
margin可以是负值
margin塌陷问题：块元素第一个元素的margin-top和最后一个元素的margin-bottom会被父元素抢走
解决方案：a.给父元素加一个边框border
b.给父元素加一个内边距padding
c.给父元素加一个overflow: hidden; //不会影响父元素content大小
5.溢出overflow
overflow: ; //【hidden、scroll(滚动条)、auto、visible(显示)】
visibility: ; //【show(默认)、hidden】
6.样式的继承：继承样式的优先级比默认样式还低
会继承的css属性：字体属性、文本属性(除了vertical-align)、文字颜色
不会继承的属性：边框、背景、内边距、外边距、宽高、溢出方式
7.默认样式：<a>、<h1>~<h6>、<p>、<ul>、ol、body
8.行内元素、行内块元素，可以被父元素当作文本处理
a.子元素在父元素中水平居中：
- 块元素给父元素加上margin: 0 auto;
- 行内元素、行内块元素给父元素加上text-align: center;
b.子元素在父元素中垂直居中：
- 块元素给子元素加上margin-top: (父元素content-子元素盒子总高)/2;(margin塌陷要加overflow: hidden;)
- 行内元素、行内块元素给父元素加上height=line-height，每个子元素都加上vertical-align: middle;
9.去除空格：给父元素设置font-size: 0; 再给文字单独设置字体
解决空白：
vertical-align: ;
display: block;
十三、浮动：
float: ; //【left、right】
1.特点
a.脱离文档流
b.浮动后默认宽高被内容撑开，可以设置宽高
c.不会独占一行
d.不会margin合并和塌陷
e.不会被当作文本处理，没有行内块的空白问题
2.影响
a.使后面的兄弟元素占据浮动元素之前的位置，在浮动元素的下面，对前面兄弟元素无影响
b.不能撑起父元素的高度，导致塌陷，但父元素的宽度依然束缚浮动的元素
3.解决
a.给父元素一个高度
b.让父元素也浮动
c.给父元素设置overflow： hidden;
d.在所有浮动元素最后添加一个块级元素，并设置clear: ; 【left、right、both】
e.加一个伪元素选择器
.parent::after {
content= '';
display: block;
clear: both;
}
十四、定位
1.相对定位：
position: realtive;
【top、bottom、left、right】: ; //left、right同时使用时，left生效，top、bottom同时使用时，top生效；谁有相对定位，谁的层级高，会盖在别的元素身上
2.绝对定位：参考点是包含块
position: absolute;
【top、bottom、left、right】: ;
包含块：a.没有脱离文档流的元素，其父元素就是包含块
b.脱离文档流的元素，第一个开启定位的祖先元素，就是他的包含块
3.固定定位
position: fixed;
【top、bottom、left、right】: ;
left: 0; right: 0; top: 0; bottom: 0; //固定定位没宽没高想充满其父元素
4.粘性定位：参考点是离它最近的有“滚动机制”的祖先元素
position: sticky;
【top、bottom、left、right】: ;
5.定位层级
a.后面的元素在显示在前面元素之上
b.可以用z-index调整显示层级，值越大层级越高
c.只有定位元素设置z-index才有效
十五、布局
常用布局名词：
顶部导航条：topbar
页头：header、page-header
导航：nav、navigator、navbar
搜索框：search、search-box
横幅、广告、宣传图：banner
主要内容：content、main
侧边栏：aside、sidebar
页脚：footer、page-footer
...全文
请发表友善的回复…
发表回复
