**使用CSS：**
CSS的声明
1.在head标签中使用style标签声明：
作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式
2.在标签上使用style属性进行声明：
作用：此声明会将CSS样式直接作用于当前标签
3.在head标签中使用link标签引入外部声明好的css文件
作用：此声明相当于调用，解决了不同网页间的样式重复使用的问题
一次声明，随处使用
问题：
不同的声明给同一个标操作了同一个样式，会使用谁的？
如果CSS的声明全部都在head标签中，这遵守就近原则，谁离标签近，谁就会被显示
**CSS的选择器**
标签选择器：
标签名：样式名1：样式值1；...
作用：会将当前的网页内的所有该标签增加相同的样式
id选择器：
#标签的id属性值{样式名1：样式值1;......}
作用：给某个指定的标签添加指定的样式
类选择器：
. 类选择器名{样式名1：样式值；........}
作用：给不同的标签添加相同的样式
全部选择器：
*{样式名1：样式值；......}
作用：选择所有的HTML标签，并添加相同的样式
---------------------------------------------------------------------------------------------------------
组合选择器：
选择器1，选择器2，.....{样式名1：样式值1：......}
作用：解决不同的选择器之间重复样式的问题
子标签选择器：
选择器 子标签选择器{样式名1：样式值1；......}
属性选择器：
标签名：[属性名=属性值]{样式名1：样式值1；......}
作用：选择某些标签指定具备某属性并且属性值为某属性值的标签
CSS的使用过程：
1.声明CSS代码域
2.使用选择器选择要添加样式的标签
根据需求来：
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某些类标签添加基础样式
使用id、属性选择器、style属性声明方式给某个标签添加个性化样式
3.书写样式单
边框设置
border:solid 1px;
字体设置
font-size:10px;设置字体大小
font-family:"黑体";(设置字体格式)
字体颜色设置
color:颜色;
背景颜色设置
background-color:颜色;
背景图片设置
background-img:url(图片的相对路径);
background-repeate:no-repeate;设置图片不重复
background-size:cover;图片平铺整个页面
高和宽设置
浮动设置
float:left/right
行高设置
line-height:10;
CSS的常用样式
代码实例：
--------------------------------------------------------------------------------
<html>
<head>
<title>CSS的样式使用</title>
<meta charset="utf-8" />
<style type="text/css">
body{
background-image: url(img/3.gif);
background-repeat: no-repeat;/*设置图片不重复*/
background-size: cover;/*设置图片平铺*/
}
table{
}
tr{
height: 40px;
}
td{
width: 100px;/*设置宽*/
border: solid 1px red;/*添加边框及其颜色和大小*/
border-radius:10px;/*设置表框的角度*/
background-color: coral;/*设置背景颜色*/
text-align: center;/*设置文本位置*/
color: darkorchid;/*设置文本颜色*/
font-weight: bold;/*设置文本加粗*/
letter-spacing: 10px;/*设置字体间距*/
}
/*---------------------------------------------*/
ul{
height: 50px;
background-color: gray;
}
li{
list-style-type: none;/*去除li的标识符*/
/*display: inline;*/
float: left;/*设置左悬浮*/
}
li a{
text-decoration: none;
font-weight: bold;
font-size: 20px;
margin-left: 20PX;
}
</style>
</head>
<body>
<h3 style="color: #9932CC;">CSS样式使用</h3>
<hr />
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>唱歌</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>跳舞</td>
</tr>
</table>
<hr />
<ul>
<li><a href="">首页</a></li>
<li><a href="">java</a></li>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
</ul>
</body>
</html>
--------------------------------------------------------------------------------
CSS的盒子模型
div标签：
块级标签，主要用来进行网页的布局，会将其中的子元素内容作为一个独立的整体存在
特点：
默认宽度是页面的宽度，但可以设置。
高度默认是没有的，但可以设置。（可以顶开）
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的
盒子模型：
外边距：margin
作用：用来设置元素和元素之间的距离
居中设置：margin:0px auto;上下间隔是 0px,水平居中。
可以根据需求单独设置上下左右的外边距。
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域：
作用：改变内容区域的大小。
设置宽和高即可改变内容区域的大小
CSS的定位
position
相对定位：relative
作用：相对元素原有的位置移动指定的距离（相对的自己的原有的位置）
可以使用top,left,right,bottom来进行设置。
注意：
其他元素的位置是不改变的
绝对定位：absolute
作用：可以使用元素参照界面或者相对父元素来进行移动
注意： 如果父级元素成为参照元素，必须使用相对定位属性(position:relative)
默认情况下是以界面为基准进行移动的
固定定位：fixed
作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
以上定位都可以使用top,left,right,bottom来进行移动
z-index:此属性是用来声明元素的显示级别的
CSS简介
最新推荐文章于 2024-04-15 16:37:06 发布
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
