CSS_2
1.CSS中常用的属性设置
css格式:
选择器{
css属性名称:属性值；
}
选择器–从htm文件中选中自己需要添加样式的html元素。
1.元素选择器—根据html元素的名称选中被控制的html标记。
2.id选择器–根据给html标记设置的id属性来选中被控制的html标记。
如果要使用id选择器那么首先需要给html标记去设置id属性。
3.类【class】选择器—根据给html标记设置的class属性来选中被控制的html标记。
如果要使用类【class】选择器那么首先需要给html标记去设置class属性。
4.包含选择器–选择所有被父元素包含的子元素。
5.属性选择器–根据html标记的属性来选中被控制的元素
1.元素 [属性名称] { sRules }：选择具有某个属性的元素
2.元素 [属性名称 = value【属性值】 ] { sRules }：选择具有某个属性且属性值等于 value 的元素
6.子元素选择器—选择所有作为E1子对象的 E2 。
7.选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。
注意:css的选择器在使用的时候，不是单一去应用，而是通过不同的组合形式来使用。
1.1关于字体的css属性设置
color–设置字体颜色[颜色单词/颜色码【#0000ff】]
font-family—设置字体名称[黑体…]
font-size --设置字体大小【数字px】
font-style–设置字体倾斜【normal | italic | oblique 】
font-weight–设置字体粗细【整百的数字【100~900】】
text-decoration–设置字体的修饰线【none || underline下划线 || overline上划线 || line-through贯穿线 】
text-shadow–文本的文字是否有阴影及模糊效果
text-transform–文本的大小写转换【none | capitalize | uppercase | lowercase 】
line-height–行高【数字px】
letter-spacing–文字之间的间隔 normal | length 【数字px】
word-spacing–单词之间插入的空隔normal | length 【数字px】
例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于字体的css属性设置</title>
<style>
p{
color:red;
font-family:楷体;
font-size:30px;
font-style:italic;
font-weight:900;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:10px;
word-spacing:20px;
text-shadow:10px 10px 20px red;
line-height: 30px;
}
</style>
</head>
<body>
<h1>关于字体的css属性设置</h1>
<h2 >color--设置字体颜色[颜色单词/颜色码【#0000ff】]</h2>
<h2>font-family---设置字体名称[黑体.....]</h2>
<h2>font-size --设置字体大小【数字px】</h2>
<h2>font-style--设置字体倾斜【normal | italic | oblique 】</h2>
<h2>font-weight--设置字体粗细【整百的数字【100~900】】</h2>
<h2>text-decoration--设置字体的修饰线【none || underline下划线
|| overline上划线 || line-through贯穿线 】</h2>
<h2>text-shadow--文本的文字是否有阴影及模糊效果</h2>
<h3>text-shadow:10px 0px 0px red;</h3>
<h3>第一个值:水平移动距离 0px 0px red;</h3>
<h3>第二个值:前后移动距离 0px 0px red;</h3>
<h3>第三个值:模糊效果</h3>
<h3>第四个值:阴影颜色</h3>
<h2>text-transform--文本的大小写转换【none |
capitalize | uppercase | lowercase 】</h2>
<h2>line-height--行高【数字px】</h2>
<h2>letter-spacing--文字之间的间隔 normal | length 【数字px】</h2>
<h2>word-spacing--单词之间插入的空隔normal | length 【数字px】</h2>
<p>测试关于字体的test css属性设置</p>
<p>测试文字是否有阴影及模糊效果</p>
<p>测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否
有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果</p>
</body>
</html>
1.2关于文本属性设置
text-indent :文本的缩进 length 【数字px】
vertical-align：垂直对齐方式top middle bottom
text-align :水平对齐方式left | right | center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于文本属性设置</title>
<style>
#p1{
font-size: 20px;
text-indent:30px;
}
#p2{
font-size: 20px;
text-indent:50px;
}
tr{
text-align:right;
vertical-align:bottom;
}
</style>
</head>
<body>
<h1>关于文本属性设置</h1>
<h2>text-indent :文本的缩进 length 【数字px】</h2>
<h2>vertical-align：垂直对齐方式top middle bottom </h2>
<h2>text-align :水平对齐方式left | right | center </h2>
<p id="p1">关于文本属性设置关于文本属性设置关于文本属性设置</p>
<p id="p2">关于文本属性设置关于文本属性设置关于文本属性设置</p>
<table border="1px" width="600px" height="200px">
<tr>
<td>text-align</td>
<td>水平对齐方式left | right | center</td>
</tr>
<tr>
<td>vertical-align</td>
<td>垂直对齐方式top middle bottom</td>
</tr>
</table>
</body>
</html>
1.3关于背景的设置
整个网页的背景设置
- 整个网页的背景颜色【在body元素中设置bgcolor】
- 整个网页的背景图片【在body元素中设置background】
Html元素的背景设置 - Html元素的背景颜色【background-color】
- Html元素的背景图片【background-image:url(“imgs/banner1.png”);】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于背景的设置</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
p{
font-size: 40px;
color: yellow;
background-color: blue;
}
table{
background-image:url("imgs/banner1.png");
}
tr{
font-size: 20px;
color: #FFFF00;
}
</style>
</head>
<body background="imgs/timg.jpg">
<h1>关于背景的设置</h1>
<h2>1. 整个网页的背景颜色【在body元素中设置bgcolor】</h2>
<h2>2. 整个网页的背景图片【在body元素中设置background】</h2>
<h1>关于HTML元素背景的设置</h1>
<div></div>
<p>关于HTML元素背景的设置--背景颜色</p>
<table border="1px" width="600px" height="200px">
<tr>
<td colspan="2">关html元素的背景设置</td>
</tr>
<tr>
<td>HTML元素的背景颜色</td>
<td>background-color:颜色单词/颜色码</td>
</tr>
<tr>
<td>HTML元素的背景图片</td>
<td>background-image:url("图片路径")</td>
</tr>
</table>
</body>
</html>
1.3关于html元素的尺寸设置
width : 设置元素的宽度 auto | length
height : 设置元素的高度auto | length
1.4 关于边框设置
border-color : 边框颜色
border-style ：边框样式
border-width：边框粗细
上面这三个属性可以分为4组
border-top-color，border-right-color，border-bottom-color，border-left-color
border-top-style，border-right-style，border-bottom-style，border-left-style
border-top-width，border-right-width，border-bottom-width，border-left-width
我们可以通过border属性设置4边的边框
border:粗细 样式 颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于边框设置</title>
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
}
#img1{
border-top-width:5px ;
border-top-style: double;
border-top-color: black;
border-right-width:10px ;
border-right-style: solid;
border-right-color: blue;
border-bottom-width:15px ;
border-bottom-style: dashed;
border-bottom-color: red;
border-left-width:20px ;
border-left-style: dotted;
border-left-color: green;
}
#img2{
border-top:5px double black;
border-right:10px solid blue;
border-bottom:15px dashed red;
border-left:20px dotted green;
}
</style>
</head>
<body>
<h1>关于边框设置</h1>
<div></div>
<br>
<img id="img1" src="imgs/avatar2.png" />
<br>
<img id="img2" src="imgs/avatar2.png" />
</body>
</html>
1.5 关于列表的设置
列表–1.有序列表 <ol><li></li></ol>
2.无序列表 <ul><li></li></ul>
3.自定义列表<dl><dt><dd></dd></dt></dl>
列表的设置就是改变一下列表的前面的标识。
list-style-image : 设置标识图标none | url ( url )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于列表的设置</title>
<style>
ul li a{
font-size: 50px;
text-decoration: none;
color: black;
}
ul{
list-style-image:url("imgs/home.PNG");
}
</style>
</head>
<body>
<h1>关于列表的设置</h1>
<h2>list-style-image : 设置标识图标none | url ( url ) </h2>
<ul>
<li><a href="#">用户信息管理</a></li>
<li><a href="#">部门信息管理</a></li>
<li><a href="#">职位信息管理</a></li>
</ul>
</body>
</html>
1.6 关于表格的设置
border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并]
border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】
empty-cells :当单元格中没有内容时,单元格的边框是否显示 show | hide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格属性设置</title>
<style>
table{
width: 800px;
height: 400px;
border-collapse:separate;
border-spacing:10px;
empty-cells:show;
}
table tr{
font-size: 20px;
text-align: right;
vertical-align: bottom;
}
</style>
</head>
<body>
<h1>表格属性设置</h1>
<h2>border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并] </h2>
<h2>border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】</h2>
<h2>empty-cells :当单元格中没有内容时,单元格的边框是否显示 </h2>
<table border="1px">
<tr>
<td colspan="3"><h1>表格属性设置</h1></td>
</tr>
<tr>
<td>border-collapse</td>
<td>设置单元格是否合并</td>
<td>separate | collapse相邻边被合并</td>
</tr>
<tr>
<td>border-spacing</td>
<td>框独立时，单元格之间的间距</td>
<td>数字px</td>
</tr>
<tr>
<td>empty-cells</td>
<td>当单元格中没有内容时,单元格的边框是否显示</td>
<td></td>
</tr>
</table>
</body>
</html>
1.7 关于补丁的设置
补丁–子元素和父元素之间的距离
如果设置的是父元素—内补丁【padding】
如果设置的是子元素—外补丁【margin】
padding:12px 15px 28px 35px
四个参数值，将按上－右－下－左的顺序作用于四边。
padding:12px
提供一个，将用于全部的四边
padding:12px 15px
两个，第一个用于上－下，第二个用于左－右
padding:12px 15px 28px
提供三个，第一个用于上，第二个用于左－右，第三个用于下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>补丁设置</title>
<style>
div{
width: 500px;
height: 400px;
background-color: black;
}
#div1{
padding: 50px;
}
#img2{
margin: 50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" src="imgs/avatar2.png" />
</div>
<br>
<div id="div2">
<img id="img2" src="imgs/avatar5.png" />
</div>
</body>
</html>
扫一扫
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
