本文详细介绍了CSS的基础知识，包括行内样式、内联样式和外部样式的使用，以及CSS选择器如类选择器、ID选择器、子元素选择器等。深入讲解了背景样式、边框样式、浮动属性、文本样式、字体样式、内边距和外边距，并通过盒子模型展示了元素布局。最后，探讨了定位属性，如绝对定位、相对定位和固定定位，帮助理解CSS在网页布局中的重要性。
目录
一、入门
三种
行内样式:一次控制一个标签
内联样式:一次通过选择器控制多个标签
外部样式:xxx.css文件,在当前html页面导入外部css文件,去关联标签样式
常用样式属性
text-decoration: underline; -- 下划线
text-decoration: line-through; -中划线-
text-decoration: none; -- 没有线
text-decoration:overline; 上划线
text-align: center; - 文本对齐方式
cursor: pointer; -- 鼠标变小手
background-color: #0000FF; 鼠标经过每一行:变成蓝色背景
background-image:背景图片
background-repeat:设置背景图片是否重复以及如何重复
background-position:设置背景图片的起始位置
1、行内样式
语法
行内样式:不推荐
弊端:一次只能控制某一个标签,加入样式
任何html标签中都有style属性
style="样式属性名称1:属性值1;样式属性名称2:属性值2;..."
格式
<div style="font-size: 25px;color: grey;background-color: red;">div1</div>2、内联标签
语法
使用选择器
标签名称选择器在head标签体中:style标签
选择器{
样式属性名称1:属性值1;
样式属性清楚2:属性值2;
....
}
弊端:style中样式代码和html标签在同一个页面使用,不利于后期管理!(优于第一种)
格式
<style>
/*css注释 标签名称选择器 */
div{
font-size: 30px;
color: greenyellow;
/*文本属性的一种样式:文本修饰:添加下划线/上划线/中划线*/
text-decoration: underline; -- 下划线
/* 鼠标经过后,变成"小手状态" 可以点击 */
cursor: pointer;
}
span{
font-size: 20px;
color: darkorange;
text-decoration: line-through; -中划线-
}
</style>
<div>div2</div>
<span>行内标签</span><br/>3、外联样式(外部样式)
语法
单独在当前项目下css文件夹
写关联当前html标签的css样式文件
在当前html页面要 使用css外部文件,需要导入
<link href="css文件" rel="stylesheet" />
rel="stylesheet" 关联层叠样式表 固定写法
格式
1）创建css标签
/* 标签名称 */
div{
font-size:40px;
color:red;
}
span{
font-size:35px;
color:green;
}2）外部导入
<link href="css/01.css" rel="stylesheet" />3）语句
<div>div2</div>
<span>行内标签</span><br/>二、CSS选择器
选择器种类
class类选择器(重点)
id选择器(重点)
子元素选择器
通用选择器:*
伪类选择器(重点)
1、class:类选择器
语法
class:类选择器
就是当前html标签上面给定义class属性,给定一个属性值
在样式标签中
.class属性值{
样式属性名称1:value1;
样式属性名称2:value2;
}
特点:同一个html页面上,多个标签可以指定相同的class属性值
2、id选择器(重点)
语法
id选择器
在标签中指定id属性以及属性值
在style标签中
#id属性值{
样式属性名称1:value1;
样式属性名称2:value2;
...
}在同一个html页面,标签中id属性值必须唯一,否则后面通过javascript的id属性值获取标签对象可能获取不到!
3、子元素选择器 (后代选择器)
语法
选择器1 选择器2{
属性样式:属性值;
}
选择器2选中的元素是选择器1选中的元素的子元素
并集选择器
/*并集选择器
elector1,selector2{
...
}
*/
4、/* 通用选择器{}/
语法
*{
font-size: 10px;
color: slategray
}5、伪类选择器 --锚伪类
描述的标签几种状态:
link 为访问过当前标签的状态
hover 鼠标悬停在标签的状态
active 鼠标正在访问（激活状态），点击鼠标，但是没有松开的状态
visited 已经访问过的状态（点击且松开）
语法
语法:
选择器:状态名称(不区分大小写){样式属性:属性值;
}
循环状态效果：必须遵循下面的先后顺序
在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。
在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。
三、背景样式---background
1、样式
background-color:背景颜色
background-image:背景图片
background-repeat:设置背景图片是否重复以及如何重复
background-position:设置背景图片的起始位置
2、背景颜色
background-color:moccasin 3、背景图片
background-image: url(image/c.jpg);4、设置背景图片是否重复以及如何重复
background-repeat:默认值 repeat(x轴/y轴重复)
no-repeat;不重复
repeat-x:x轴重复
repeat-y:y轴重复5、设置背景图片的起始位置
background-position:默认值就是 left top
content center
right bottom6、背景的简写属性（先后顺序）
<!--background:background-color background-image background-repeat background-position''-->
background: darkgray url(image/c.jpg) no-repeat right top ;四、边框样式 ---border
1、设置边框颜色属性
格式：border-方向-color ------简写border-color
border-left-color:#00F ;
border-right-color:#F00 ;
border-top-color:#0F0 ;
border-bottom-color:darkgray ;
1)默认的方向:上 右 下 左
2)如果某一边没有设置颜色,补齐对边的颜色2、设置边框宽度border-方向-width
border-方向-width ----------- border-width
border-left-width: 10px;
border-right-width: 20px;
border-top-width: 30px;
border-bottom-width: 40px;3、设置边框样式属性:border-线条-style
border-线条-style -----------border-style:
border-left-style: double;
border-right-style: dotted;
border-top-style: solid;
border-bottom-style: dashed ;
solid:单实线
double:双实现
dotted:点
dashed:虚线4、边框的简写属性
border:border-width border-style（必需) border-color
border: 5px solid #000;五、浮动属性 ---float
1、浮动属性
一旦某个元素进行浮动,那么就会脱落当前文档流(当前body中的先后顺序),直到它的外边缘碰到某一个框或者是浏览器边框停止掉
2、样式
clear :清除浮动!
both:两边都不浮动 (推荐)
left:左浮动
right:右浮动
六、文本样式
1、文本对齐方式 ----text-align
text-align: center
2、设置或删除文本装饰 ---text-decoration
underline:下划线
overline:上划线
line-through:中划线
none:去掉装饰
3、 字符间距 ----letter-spacing
letter-spacing: 10px;
4、单词间距，中文两个字组成一个单词
word-spacing: 20px;
七、字体样式
1、字体类型 --font-family
font-family: "Sofia";
2、字体样式 --font-style
normal - 文字正常显示 默认值
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
3、字体大小 --font-size
font-size: 20px;
4、字体粗细程度 --font-weight
bold:适当加粗
bolder:比bold设置的相对粗一些
八、内边距 --padding 改变大小
1、简写属性
padding:pading-top padding-right pading-bottom padding-left
padding:0 0 10px 10px 九、外边距 margin 改变位置
1、将div整体往浏览器中间移动
/* 将div整体往浏览器中间移动 */
margin: 220px 0 0 480px;
十、盒子模型
1、什么是盒子
将任何标签都可以看成盒子，使用div包裹起来，通过css选择器控制他们的样式“层级布局” （div+css）
1）盒子厚度：边框border属性
2）盒子容量：设置块标签的width + height
3）盒子边距：padding 边框和内容之间的距离
4）盒子外边距：margin 盒子和盒子之间的距离
5）padding和maring默认方向：上右下左
2、测试
<html>
<head>
<meta charset="utf-8">
<title>盒子模型应用</title>
<style>
#formDiv{
/* 指定大div边框 */
border: 1px solid #000;
/* 设置宽和高度容量 */
width: 450px;
height: 260px;
/* 设置div的外边距 */
margin: 150px 0 0 400px;
/* css背景属性 */
/* background: darkgray url(./image/index_3.jpg) no-repeat center top; */
background: darkgray no-repeat center top;
}
/* 修饰用户名所在div */
#user_div{
margin: 50px 0 0 100px;
}
/* 修饰密码所在div */
#password_div{
margin: 20px 0 0 100px;
}
/* 修饰复选框所在div */
#checkbox_div{
margin: 20px 0 0 150px;
}
/* 修饰id="btn_div"的div*/
#btn_div{
margin: 20px 0 0 170px;
}
/* 修饰id="reg_btn"的外边距" */
#reg_btn{
margin-left: 30px;
}
</style>
</head>
<!--
大的div中 包含三个div
用户名所在div
密码所在div
特殊按钮div
div+css:盒子模型 进行层级布局
-->
<body>
<div id="formDiv">
<form>
<div id="user_div">
用户名:<input type="text" name="username" placeholder="请输入用户名" />
</div>
<div id="password_div">
密  码:<input type="password" name="password" placeholder="请输入密码" />
</div>
<div id="checkbox_div">
<input type="checkbox" value="remember me" />remember me
</div>
<div id="btn_div">
<input type="submit" value="登录" /><input type="submit" id="reg_btn" value="注册" />
</div>
</form>
</div>
</body>
</html>十一、定位属性 -- position
1、定位属性
left 向左移动
top 向下移动
2、绝对定位 absolute
position：absolute;
left：100xp；
top：100xp；
相对与页面进行移动
3、相对定位 relative
position：relative；
left：100xp；
top：100xp；
针对当前元素以前的位置进行移动
4、固定定位 fixed
position：fixed；
left：100xp；
top：100xp；
元素固定在页面某个位置，不随页面滚动而滚动。
扫一扫
3249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
