前篇内容
从博客园主题了解前端 - HTML
样式修改
在博客页面中按快捷键F12
进入浏览器的开发人员工具。
![](https://img2020.cnblogs.com/blog/1820281/202003/1820281-20200329213615099-1726724792.png)
需要关注的三个地方:
序号①,用于选择你要修改样式的元素。
序号②,表示所选择元素的标签名称。
序号③,选中元素当前的css样式,可以先在这里修改到合适的样式,然后再拷贝到博客园的CSS代码框中。
语法规则
格式:选择器 { 属性:值; }
注释:/*这是注释*/
分组:p,h1,h2 {color:red;}
嵌套:p{color:red;}
.marked p{color:blue;}
选择器
项 |
描述 |
案例 |
# |
选择元素中的id |
#exp1{color:red;} |
. |
选择元素中的class |
.exp2{color:red;} |
(空格) |
选取某元素的后代元素 |
#exp1 a{color:red;} |
> |
子元素选择器 |
div>exp1{color:red;} |
+ |
相邻兄弟选择器 |
div+p{color:red;} |
~ |
后续兄弟选择器 |
div~p{color:red;} |
[attribute] |
选择包含该属性的元素 |
[title]{color:blue;} |
[attribute=value] |
选择属性为某值的元素 |
[title="hello"]{color:blue;} |
[a~=v]/[a*=v]/[a|=v]/[a^=v]/[a$=v] |
包含独立值的、可拆出值的、开头是完整且唯一或者以-分隔的、以此值开头的、以此值结尾的 |
|
样式表
1.外部样式:将css样式保存到mystyle.css文件中,在文档html中引用
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.内部样式:
<head>
<style>
body {background-image:url("images/back40.gif");}
</style>
</head>
3.内联样式
<p style="color:red;">这是一个段落</p>
4.多重样式下优先级
内联样式>内部样式>外部样式>浏览器样式
背景属性
属性 |
描述 |
background |
简写属性,作用是将背景属性设置在一个声明中 |
background-attachment |
背景图像是否固定或者随着页面的其余部分滚动 |
background-color |
设置元素的背景颜色 |
background-image |
把图像设置为背景 |
background-position |
设置背景图像的起始位置 |
background-repeat |
设置背景图像是否及如何重复 |
尺寸属性
属性 |
描述 |
属性 |
描述 |
height |
设置元素的高度 |
width |
设置元素的宽度 |
max-height |
设置元素的最大高度 |
max-width |
设置元素的最大宽度 |
min-height |
设置元素的最小高度 |
min-width |
设置元素的最小宽度 |
文本属性
属性 |
描述 |
属性 |
描述 |
color |
设置文本颜色 |
direction |
设置文本方向 |
letter-spacing |
设置字符间距 |
line-height |
设置行高 |
text-align |
对齐元素中的文本 |
text-decoration |
向文本添加修饰 |
text-indent |
缩进文本的首行 |
text-shadow |
设置文本阴影 |
text-transform |
控制元素中的字母 |
unicode-bidi |
设置或返回文本是否被重写 |
vertical-align |
设置元素的垂直对齐 |
white-space |
设置元素中空白的处理方式 |
word-spacing |
设置字间距 |
|
|
字体属性
项 |
描述 |
项 |
描述 |
font |
在一个声明中设置所有的字体属性 |
font-family |
指定文本的字体系列 |
font-size |
指定文本的字体大小 |
font-style |
指定文本的字体样式 |
font-variant |
以小型大写字体或者正常字体显示文本 |
font-weight |
指定字体的粗细 |
链接属性
项 |
描述 |
项 |
描述 |
a:link |
正常,未访问过的链接 |
a:visited |
用户已访问过的链接 |
a:hover |
当用户鼠标放在链接上时 |
a:active |
链接被点击的那一刻 |
列表属性
项 |
描述 |
list-style |
简写属性,用于把所有用于列表的属性设置于一个声明中 |
list-style-image |
将图像设置为列表项标志 |
list-style-position |
设置列表中列表项标志的位置 |
list-style-type |
设置列表项标志的类型 |
表格属性
项 |
描述 |
border |
表格边框 |
border-collapse |
边框是否被折叠成一个单一的边框或隔开 |
text-align |
文本对齐 |
vertical-align |
垂直对齐 |
元素显示
项 |
描述 |
display |
显示方式 |
visibility |
是否可见 |
定位属性
项 |
描述 |
position |
指定元素的定位类型 |
top/right/bottom/left |
上、右、下、左偏移 |
cursor |
光标移动到定位时的类型 |
overflow(overflow-y/overflow-) |
溢出(垂直/水平) |
z-index |
堆叠顺序 |
clip |
剪辑一个绝对定位的元素 |
元素定位类型
项 |
描述 |
项 |
描述 |
static |
默认定位 |
fixed |
相对浏览器窗口 |
relative |
相对默认定位 |
absolute |
相对于最近的已定位父元素 |
sticky |
滚动定位,阈值内相对,超出时固定 |
|
|
浮动属性
项 |
描述 |
float |
指定浮动方式 |
clear |
清除浮动 |
盒子模型
项 |
描述 |
Margin(外边距) |
清除边框外的区域,外边距是透明的 |
Border(边框) |
围绕在内边距和内容外的边框 |
Padding(内边距) |
清除内容周围的区域,内边距是透明的 |
Content(内容) |
盒子的内容,显示文本和图像 |
![](https://www.runoob.com/images/box-model.gif)
网页布局
![](https://www.runoob.com/wp-content/uploads/2019/04/DBD1E737-47C5-445E-BFEC-7547210D88D5.jpg)
响应式
@media screen and (max- 600px) {
.column {
}
}