CSS层叠样式表
-
Cascading Style Sheet, 作用: 美化页面, 相当于装修
如何在HTML页面中添加CSS样式代码
-
三种引入方式:
选择器
-
作用: 用来查找元素的, 找到之后才能添加样式
-
id选择器: 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复
-
格式: #id{样式代码}
-
格式: .class{样式代码}
-
分组选择器: 将多个选择器合并成一个选择器
-
格式: div,#id,.class{样式代码}
-
格式: *{样式代码}
选择器续
-
子孙后代选择器: 通过元素和元素之间的关系匹配元素
-
子元素选择器:通过元素和元素之间的关系匹配元素
-
伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态
-
格式: a:link/visited/hover/active{样式代码}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
/*子孙后代选择器*/
/* body div div p{
color: red;
}*/
/*子元素选择器*/
body>div>p{
color: red;
}
/*伪类选择器*/
a:link{color: red}/*未访问*/
a:visited{color: green}/*访问过*/
a:hover{color: yellow}/*悬停*/
a:active{color: blue}/*点击/激活*/
</style>
</head>
<body>
<a href="http://www.tedu.cn">超链接1</a>
<a href="http://www.baidu.com">超链接2</a>
<a href="http://www.youku.com">超链接3</a>
<p>p1</p>
<div>
<p>p2</p>
<div><p>p3</p></div>
<div>
<p>p4</p>
<div><p>p5</p></div>
</div>
</div>
</body>
颜色赋值
-
三原色RGB RedGreenBlue , 每种颜色的取值范围0-255
-
五种赋值方式:
-
颜色单词赋值: red/green/blue/yellow/pink....
-
6位16进制: #ff 00 00
-
3位16进制: #f00
-
3位10进制: rgb(255,0,0)
-
4位10进制: rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明
-
背景图片
-
background-image:url("路径") 设置背景图片
-
background-size:100px 200px; 设置背景图片尺寸
-
background-repeat: no-repeat; 禁止重复
-
background-position:200px 100px; 设置背景图片位置
-
background-position:50% 100%; 设置背景图片位置
html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <style> h1{ color: red; color: #00ff00; color: #00f; color: rgb(255,255,0); color: rgba(255,0,0,0.2); } #d1{ width: 200px; height: 200px; background-color: purple; /*设置显示的背景图片*/ background-image: url("../imgs/a.jpg"); /*设置背景图片的尺寸: 宽 高*/ background-size: 100px 100px; /*禁止重复*/ background-repeat: no-repeat; /*控制位置:横向x 纵向y 通过像素偏移值*/ background-position: 20px 50px; /*控制位置:横向x 纵向y 通过百分比*/ background-position: 80% 80%; } #d2{ width: 611px; height: 376px; background-color: #e8e8e8; background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png"); background-repeat: no-repeat; background-size: 318px 319px; background-position: 90% 80%; } </style> </head> <body> <div id="d2"></div> <div id="d1">背景测试</div> <h1>颜色测试</h1> </body> </html>
文本和字体相关样式
-
text-align:left/right/center; 水平对齐方式
-
text-decoration:overline/underline/line-through/none; 文本修饰
-
line-height:20px; 设置行高
-
text-shadow:颜色 x偏移值 y偏移值 模糊度; 设置阴影
-
font-size:20px; 字体大小
-
font-weight:bold加粗/normal去掉加粗;
-
font-style:italic; 斜体
-
font-family:xxx,xxx,xxx; 设置字体
-
font: 20px xxx,xxx,xxx; 字体大小+字体设置
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 40px;
border: 1px solid red;
/*文本水平对齐方式*/
text-align: center;
/*文本修饰 overline上划线,
underline下划线,line-through删除线,none去掉文本修饰*/
text-decoration: line-through;
/*行高,控制行间距,如果只有单行文本可以实现垂直居中*/
line-height: 40px;
/*文本阴影:颜色 x偏移值 y偏移值 模糊度(值越小越清晰)*/
text-shadow: green 5px 5px 5px;
/*字体大小*/
font-size: 20px;
/*加粗*/
font-weight: bold;
/*设置字体*/
font: 30px cursive;
}
a{text-decoration: none}
h1{
font-weight: normal;/*去掉加粗*/
/*斜体*/
font-style: italic;
/*设置字体*/
font-family: cursive;
}
</style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>文本和字体</div>
</body>
</html>
元素的显示方式display
-
none: 隐藏元素
-
行内元素不能修宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <style> div{ /*块级元素 独占一行 可以修改宽高*/ border: 1px solid red; width: 100px; height: 100px; } span{ /*行内元素 共占一行 不能修改宽高*/ border: 1px solid blue; width: 100px; height: 100px; } img{ /*行内块元素 共占一行 可以修改宽高*/ width: 100px; height: 100px; } a{ background-color: #0aa1ed; width: 132px; height: 40px; /*如果行内元素需要修改宽高, 必须将显示方式改成block或inline-block*/ display: block; text-align: center; line-height: 40px; color: white; text-decoration: none; font-size: 20px; border-radius: 3px;/*设置圆角,值越大越圆*/ } </style> </head> <body> <a href="">查看详情</a> <img src="../imgs/a.jpg" alt=""> <img src="../imgs/a.jpg" alt=""> <img src="../imgs/a.jpg" alt=""> <div>div1</div> <div>div2</div> <div>div3</div> <span>span1</span> <span>span2</span> <span>span3</span> </body> </html>
盒子模型
-
盒子模型= content内容+margin外边距+padding内边距+border边框
盒子模型之Content内容
-
通过width和height设置元素的内容大小
-
两种赋值方式
-
像素
-
上级元素的百分比
-
盒子模型之Margin外边距
-
作用: 控制元素的显示位置
-
赋值方式:
-
行内元素上下外边距无效
-
上下相邻彼此添加外边距 取最大值, 左右相邻 两者相加
-
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden 解决
盒子模型之border边框
-
作用: 控制元素边框的效果
-
赋值方式:
-
border-radius:10px; 设置圆角 值越大越圆, 超过宽高的一半时为正圆
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <style> div{ /*块级元素 独占一行 可以修改宽高*/ border: 1px solid red; width: 100px; height: 100px; } span{ /*行内元素 共占一行 不能修改宽高*/ border: 1px solid blue; width: 100px; height: 100px; } img{ /*行内块元素 共占一行 可以修改宽高*/ width: 100px; height: 100px; } a{ background-color: #0aa1ed; width: 132px; height: 40px; /*如果行内元素需要修改宽高, 必须将显示方式改成block或inline-block*/ display: block; text-align: center; line-height: 40px; color: white; text-decoration: none; font-size: 20px; border-radius: 3px;/*设置圆角,值越大越圆*/ } </style> </head> <body> <a href="">查看详情</a> <img src="../imgs/a.jpg" alt=""> <img src="../imgs/a.jpg" alt=""> <img src="../imgs/a.jpg" alt=""> <div>div1</div> <div>div2</div> <div>div3</div> <span>span1</span> <span>span2</span> <span>span3</span> </body> </html>
盒子模型之padding内边距
-
作用: 控制元素内容的位置
-
赋值方式: 和外边距类似
-
给元素添加内边距会影响元素的宽高,Box-sizing: border-Box;给元素添加此样式后边框和内边距则不再影响宽高
-
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Title</title> <style> #d1{ width: 400px; height: 200px; border: 20px solid red; /*设置圆角,值越大越圆, 超过宽高一半为正圆(前提是正方形)*/ border-radius: 200px; } #d2{ width: 50px; height: 50px; border:1px solid red; /*给元素添加内边距会影响元素的显示宽高*/ padding-left: 50px; padding-top: 50px; } </style> </head> <body> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <div id="d2">内边距</div> <!--div#d1 +tab div.c1 +tab--> <div id="d1">边框测试</div> </body> </html>
CSS的三大特性
!important>id选择器>类选择器>标签名选择器>继承(因为继承属于间接选中)
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*通过继承可以将全局样式写在body里面,整个页面所有标签全部继承*/
font-family: cursive;
}
#d1{
color: red;
}
div{
color: green !important;
}
p{color: blue;}
</style>
</head>
<body>
<div id="d1">
<p>这是p标签</p>
<span>这是span</span>
<a href="">超链接</a>
</div>
</body>
</html>
原文地址:https://www.jb51.cc/wenti/3281537.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。