CSS
2021-08-10 本文已影响0人
大写的空气
CSS定义
指层叠样式表(Cascading Style Sheets)，描述了如何在屏幕、纸张或其他媒体上显示HTML元素
CSS由两个主要的部分构成：选择器、一条或多条声明(每个声明由一个属性和一个值组成, 属性与值间用冒号隔开)
p {
color: red;
text-align: center;
}
id和class选择器
id选择器以#开始
class选择器用来描述一组元素的样式，以.号显示
.center{text-align:center} //让所有拥有center类的HTML元素均为居中
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
也可以知道某个元素使用class,如p.center{text-align: center}
CSS创建
外部样式表
样式需要应用于多个页面时，外部样式表很合适
如下，浏览器从mystyle.css中读取样式声明
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
单个文件特殊样式, 使用<style>标签在文档头部定义样式表
<head>
<style>
p {margin-left: 20px;}
</style>
</head>
内联样式表
表现与内容混在一起
<p style="color:sienna;margin-left:20px">段落</p>
多重样式优先级
内联样式(Inline style) > 内部样式(Internal style sheet) > 外部样式(External style sheet) > 浏览器默认样式
但是当写代码时，外部样式放在内部样式的后面，则外部样式会覆盖内部样式
CSS背景
-
background-color定义元素的背景颜色
body {background-color: #abcdef;}颜色也可以使用rgb(255, 0, 0)或者直接使用颜色字符串如red -
background-image定义元素的背景图像，默认平铺重复显示
body {background-image:url('https://static.runoob.com/images/mix/gradient2.png')}.通过background-repeat控制平铺方向，background-repeat: repeat-x水平平铺,当不需要平铺时，使用no-repeat属性, 使用background-position改变图像在背景图中的位置
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top; //图片将会在顶部右边出现
}
body {background:#abcdff url('img_tree.png') no-repeat right top;}、、一句话实现
CSS文本格式
- 文本颜色
color - 文本对齐方式
text-align
文本可居中center、左对齐left、右对齐right、两端对齐justify - 文本修饰
text-decoration
从设计的角度看 text-decoration属性主要是用来删除链接的下划线a {text-decoration: none},上划线overline删除线line-through下划线underline - 文本转换
text-transform
指定大写uppercase、小写lowercase、首字符大写capitalize - 文本缩进
text-indent
设置文本首行缩进30像素p {text-indent:30px;} - 字符间距
letter-spacing
设置单个字符间间距, 可以使用负值 - 文字间距
word-spacing
文字间空格的占位长度 - 文本行间距
line-height
属性使用小数或百分百，一般默认行高约为110%左右, 也可以使用像素来设置行高 - 文字方向
direction
默认为左到右ltl，还有rtl与inherit从父元素继承 - 文字阴影
text-shadow
text-shadow: 2px 2px 5px #ff0000;属性有必填水平阴影位置h-shadow允许负值，必填垂直阴影位置v-shadow,模糊距离blur，阴影颜色color
字体
Sans-serif字母边角不带修饰，Serif字母边角带修饰， font-family设置字体p{font-family:"Times New Roman",Times,serif;}.字体组合在这
- 字体样式
font-style
正常normal、斜体italic - 字体大小
font-size
通过像素设置字体大小，默认大小是16px=1em，百分百整体控制文字大小
//body中所有h1、h2、p都将放大1.2倍
body {font-size:120%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.975em;}
链接
<a href="/css/" target="_blank">这是一个链接</a>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
列表
无序列表ul, 有序列表ol
- 列表项标记的类型
list-style-type包含的属性值有空心圆circle、实心方形square、大写罗马字符upper-roman、小写字母lower-alpha。其他类型可参考这里 - 也可以通过
list-style-image使用图片
ul
{
list-style-image:url('sqpurple.gif');
}
表格table
//默认双边框，因为表和th/td元素有独立的边界
table,th,td
{
border:1px solid black;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
- 要显示单个边框,增加
table{ border-collapse: collapse; }. - 控制宽高使用
width、height，如table{width:100%; height: 10em} - 表格文字对齐
text-align设置水平对齐方式，vertical-align设置垂直方向对齐 - 表格填充使用
padding：xxpx对td或th填充 - 表格颜色
background-color
边框
一个属性设置border: 5px solid red;
- 边框样式
border-style
单侧边框设置border-top-style,border-right-style,border-bottom-style,border-left-style。也可以一个字段设置完, 如border-style:dotted double hidden solid;
无边框border-style:none;
点虚线边框dotted，长条虚线边框dashed
实线边框solid, 双边框double, 凹槽边框groove
垄状边框ridge，嵌入边框inset，外凸边框outset，隐藏边框hidden
WeChat54a995e84963e5ae92f3f4c9ea0da14d.png
- 边框宽度
border-width - 边框颜色
border-color
嵌套
- p{ }: 为所有 p 元素指定一个样式
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
显示Display与可见性Visibility
- 隐藏元素
display: none或visibility: hidden
visibility可以隐藏某个元素，但空间依然被占用
display则隐藏的元素不占用空间 。 display还有一行显示的inline、换行显示block属性 - 内联元素只需要必要的宽度，不强制换行
span、a
定位Position
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性
- 默认值
static定位, 元素不会受到 top, bottom, left, right影响 - 元素的位置相对于浏览器窗口是固定位置
fixed.窗口滚动，它不会跟着移动，不占用空间
距离顶部30px
- 相对定位
relative, 占用空间 - 绝对定位
absolute
相对于自己最近的父元素定位，不占用空间。如要更改被重叠元素的上下顺序，使用z-index.值越大，越靠上 - 粘性定位
sticky，基于用户的滚动位置来定位
指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。Safari 需要使用 -webkit-sticky -
更改光标样式
WeChatb9450442d7dd13dd968a60de6b36bd89.png
布局overflow
控制内容溢出元素框时，在对应的元素区间内添加滚动条
- 默认值
visible, 内容会溢出 - 内容会被修剪，内容不可见
hidden - 内容会被修剪，可以滚动
scroll - 如果内容被修剪，则可滚动
auto
浮动Float
使元素向左left或向右right移动，周围的元素会重新排列，往往用于图像。
多个浮动的元素放在一起，如果有空间的话，他们会彼此相邻.
clear: both;指定元素两侧不能出现浮动元素, 同时也支持right left，这样可实现浮动元素后面放不浮动元素
对齐
- 元素水平居中对齐
margin: auto, 需要设置元素的宽度，否则居中对齐将不起作用 - 文本居中对齐
text-align: center - 图片居中
img {
display: block;
margin: auto;
width: 40%;
}
- 左右对齐使用
position: absolute或者使用float
如使用float对齐图片元素，出现溢出使用overflow:auto; - 垂直居中使用
padding: 0;或使用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%);
}
WeChat1fac26d0ae8f87331dcc4bd80f22db2b.png
组合选择器
- 子元素选择器
>，只能作为一级子元素的元素
div>p指div块下第一层p坐标元素 - 相邻兄弟选择器
+，紧接在另一元素后的元素，且两者有相同的父元素
div+p选取所有位于</div>元素后第一个<p>元素 - 后续兄弟选择器
~,后续所有相邻的兄弟元素
伪类
-
p:first-child匹配第一个<p>元素 -
p > i:first-child匹配所有<p>元素的第一个<i>元素
