92_JavaWeb_CSS
【摘要】 CSS 选择器 属性
CSS
CSS 是层叠样式表单，是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
选 择 器：浏览器根据"选择器" 决定受 CSS 样式影响的 HTML 元素(标签)
属性(property): 要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，形成样式声明(declaration) eg：p{color:blue}
多个声明用分号分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)
CSS 和 HTML
把css样式写成一个单独的 css文件，再通过 link 标签引入即可复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSreview</title>
<!-- 1 把css样式写成一个单独的 css文件，再通过 link 标签引入即可复用-->
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div>div标签1</div>
<span>span标签1</span>
</body>
</html>选择器&属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSreview2</title>
<!--选择器 标签选择器，ID选择器，Class类型选择器，组合选择器-->
<!-- 1 标签选择器 -->
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
<!-- 2 ID选择器 -->
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ;
}
</style>
<!-- 3 Class类选择器 -->
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: grey;
font-size: 26px;
border: 1px solid red;
}
</style>
<!-- 4 组合选择器 -->
<style type="text/css">
.class03 , #id003{
color: blue;
font-size: 20px;
border: yellow 1px solid;
}
</style>
</head>
<body>
<div>div标签1</div>
<span>span标签2</span>
<div id="id002">divID选择1</div>
<div id="id001">divID选择2</div>
<div class="class01">div类选择class1</div>
<span class="class02">span类选择class2</span>
<div class="class03">div组合选择1</div>
<span id="id003">span组合选择2</span>
</body>
</html>css 常用样式
div{
color: red; /*1-颜色*/
border: 1px yellow solid; /*2-实线边框*/
width: 300px; /*3-宽度*/
height: 300px; /*4-高度*/
background-color: green; /* 5-背景色*/
font-size: 30px; /*6- 字体大小*/
margin-left: auto; /*7- 左边缘*/
margin-right: auto; /*8- 右边缘*/
text-align: center; /*9- 文本居中*/
}
table{
border: 1px red solid; /* 10-设置边框*/
border-collapse: collapse; /*11- 将边框合并*/
}
td{
border: 1px red solid;
}
a{
text-decoration: none; /* 12-超连接去下划线 */
}
ul{
list-style: none; /*13- 列表去除修饰 */
}
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）