目录
css样式
css，专门用来“美化”标签，使页面更好看。css(层叠样式表) 可以创建好看的网页。
css应用方式
在标签上使用
在之前学到的html标签上通过style属性进行调整样式
<div style="color:red;">ling</div>在head标签中写style标签
- 在head标签中嵌套使用style标签，并为所需要的样式署名和书写
- 在body标签中将样式书写到某标签上只需要使用class标签进行样式署名即可
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lingdang</title>
<style>
.l{
color: red;
}
.d{
color: aqua;
}
</style>
</head>
<body>
<div class="l">ling</div>
<div class="d">dang</div>
</body>
</html>效果图如下：
在文件中使用
- 在css文件中书写样式
- 在html的head标签中使用link双标签定义当前文档与外部资源的联系，其中使用属性rel=stylesheet运行是 body-ok 的，因此所涉及的样式将允许出现在body中。再使用属性href="文件地址"进行文件连接
- 适用于书写多个页面且会用到相同样式时
示例代码：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lingdang</title>
<link rel="stylesheet" href="../static/i.css">
</head>
<body>
<div class="l">ling</div>
<div class="d">dang</div>
</body>
</html>css
.l{
color: red;
}
.d{
color: aqua;
}效果图如下：
选择器
类选择器
- CSS 类选择器根据 class 属性的内容匹配样式，是给一类 HTML 标签设置样式
- 在使用时需要给 class 属性命名
- 类选择器的名称，必须以 “.” (英文状态下的点) 开头，其格式为“.属性名{样式}”
- 多个标签可以同时使用一个类
- 一个标签可以同时属于多个类（空格隔开）
id选择器
- CSS ID 选择器 会根据该元素的 id 属性中的内容匹配样式
- 使用时需要使用id属性命名
- 类选择器的名称，必须以 “#” (英文状态下的点) 开头，其格式为“#属性名{样式}”
- 一个HTML页面，不能出现相同的 id，id相当于是身份证，只能一个标签使用
标签选择器
- 标签选择器会根据该元素的标签名称匹配样式
- 使用时直接使用标签名命名
- 标签选择器，其格式为“标签名{样式}”
- 一个html页面，标签选择器的样式将运用到所有的该标签中
属性选择器
- 属性选择器会根据该元素的标签名称所指定的属性匹配样式
- 使用时直接使用标签名[属性名]命名
- 属性选择器，其格式为“标签名[属性名]{样式}”
- 一个html页面，属性选择器的样式将运用到所有的该标签的指定属性中
后代选择器
- 后代选择器可以选择标签中的后代（子辈或孙辈等）为其指定样式
- 其格式为“标签1 标签2”，该意思是去选择标签1中的后代为标签2的所有标签进行修改样式
子选择器
- 子选择器可以选择标签中的子辈为其指定样式
- 其格式为“标签1>标签2”，该意思是去选择标签1中的子辈为标签2的所有标签进行修改样式
选择器优先权
- 当多个样式使用时，样式属性重名谁后在css中定义就选择谁，后定义的会覆盖先定义的样式
- 若不想覆盖可以在该属性后写!important，可以使其不被覆盖
css样式
高度、宽度
- 高度（height）宽度（width）都可以用px作为单位
- 宽度还可以用百分比进行表示，高度不可以
- 宽度在行内标签默认无效，块级标签默认有效（注意块级标签的霸道性）
.a{
height: 100px;
width: 50%;
}块级和行内标签
- 想要同时能够应用高度宽度，并且不会占据整行，也就是既具有行内标签又具有块级标签的属性
- 这是可以在css中采用属性display：inline-block在进行高度宽度的设置即可
- 行内标签默认设置高度、边距无效
- 块级和行内标签可以转换
- 块级转换为行内display:inline
- 行内转换为块级display:block
- 编程块级+行内display：inline-block
- display:flex 弹性盒子布局。
- 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
.l{
display: inline-block;
height: 100px;
width: 50%;
}字体、颜色
- 字体（font-size）可以用像素px作为单位，也可以用larger等作为变化范围
- 颜色（color）设置字体颜色，可以使用英文进行命名也可以参看颜色表的编号
- 背景颜色（background-color）：设置背景颜色
- 字体加粗（font-weight）不用单位直接跟数字，也可以使用border等进行加粗
- 字体（font-family）后面跟字体名字
.l{
font-size: 50px;
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
font-weight: bolder;
color: chocolate;
}文字对齐方式
- 水平居中（text-align：center）
- 垂直居中（line-hight:（高度值））（一般只有一行会实现）（针对文字，图片不适用（图片可以使用外边距））
.l{
height: 50px;
width: 60px;
text-align: center;
line-height: 50px;
}浮动
- 将所显示文字浮动靠右（float:right）
- 将块级标签浮动后，该标签也将变成所设置的宽度，将不会独占一行
- 让标签浮动后，将脱离文档流（可能会将原有的文字覆盖）
- 将标签恢复文档流（clear:both）
<head>
<meta charset="UTF-8">
<title>lingdang</title>
<style>
.l{
float: left;
height: 150px;
width: 150px;
border: 1px solid red;
background-color: black;
}
</style>
</head>
<body>
<div style="background-color: chocolate">
<div class="l"></div>
<div class="l"></div>
<div style="clear: both"></div>
</div>
</body>内边距
总大小没有变化，在原来的里面增加边距（将自己内部加距离）
- 顶部内边距（padding-top）：在所指定的宽度高度中在内部的顶端加上边距
- 左边内边距（padding-left）：在所指定的宽度高度中在左边端加上边距
- 右边内边距（padding-right）：在所指定的宽度高度中在右边端加上边距
- 底部内边距（padding-bottom）：在所指定的宽度高度中在底部加上边距
- 内边距速记（padding）：分别所指四个上、右、下、左边距（顺时针）
.l{
padding-left: 20px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 30px;
padding: 20px 10px 30px 20px;
}外边距
原有的大小没有改变，仅在外面新增边距，总大小=原大小+新增边距大小。（将自己与别人加距离）
- 顶部内边距（margin-top）：在所指定的宽度高度中在内部的顶端加上边距
- 左边内边距（margin-left）：在所指定的宽度高度中在左边端加上边距
- 右边内边距（margin-right）：在所指定的宽度高度中在右边端加上边距
- 底部内边距（margin-bottom）：在所指定的宽度高度中在底部加上边距
- 内边距速记（margin）：分别所指四个上、右、下、左边距（顺时针）
- margin：0 auto（板块居中，设置边距为0，auto自动，默认居中）
.l{
margin-left: 20px;
margin-right: 10px;
margin-bottom: 30px;
margin-top: 20px;
margin: 20px 10px 30px 20px;
}body标签取消边距
body{
margin：0；
}
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
