CSS
概念
Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
使用方法
css和html结合方式：
Css的语法
选择器
选择具有相似特征的元素。一般分为基础选择器和扩展选择器。
基础选择器的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style>
/*id选择器*/
#div1 {
color: blue;
}
/*元素选择器 id选择器优先级高于元素选择器*/
div {
color: gold;
}
/*类选择器*/
.cls1 {
color: aqua;
font-size: 40px;
}
</style>
</head>
<body>
<div id="div1">来来来</div>
<div>一起恰饭</div>
<p class="cls1">
想成为黑马程序员,在这上面下赌注,自己本身就很喜欢
</p>
</body>
</html>
扩展选择器的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p {
color: gold;
}
/*此处是让div有边框*/
div > p {
border: aqua solid;
}
input[type='text'] {
border: 6px solid;
}
/*超链接，伪类选择器*/
a:link {
color: gold;
}
a:visited {
color: darkorange;
}
a:hover {
color: green;
}
a:active {
color: antiquewhite;
}
</style>
</head>
<body>
<div>
<p>
来来来,准备吃饭了
</p>
</div>
<!--要有p标签才会被子选择器和父选择器选中-->
<div>这么快,肚子确实有点饿了</div>
<!--属性选择器一般选择的是input标签-->
<input type="text">
<input type="password">
<br>
<a href="#">
黑马程序员
</a>
</body>
</html>
属性
字体属性
<!DOCTYPE html>
<html lang="en">
<!--遇到问题：div边框出现两次，只定义过一次。-->
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
p {
color: red;
font-size: 30px;
text-align: center;
line-height: 300px;
/**
border：边框
*/
border: 1px solid red;
}
.div2 {
border: 1px solid red;
/**
尺寸
*/
height: 200px;
width: 200px;
/**
背景
*/
background: url("../image/banner_1.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="div1"><p>小鹏到此一游
</p></div>
<div class="div2"></div>
</body>
</html>
⭐盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div {
border: 1px solid red;
width: 200px;
}
.div1 {
width: 100px;
height: 100px;
/*margin: 50px;*/
}
.div2 {
width: 200px;
height: 200px;
padding: 50px;
/**
盒子的大小不会随着padding的变化而变化
*/
box-sizing: border-box;
}
.div3 {
float: left;
}
.div4 {
float: left;
}
.div5 {
float: left;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">
</div>
</div>
<div class="div3">aaaaaa</div>
<div class="div4">bbbbbb</div>
<div class="div5">cccccc</div>
</body>
</html>
内边距和外边距，都只是一个相对的概念。
转载：https://blog.csdn.net/gplili/article/details/113793555
查看评论