软件设计之CSS
【狂神说Java】CSS3最新教程快速入门通俗易懂
学习内容：
软件开发技能点参照：软件开发，小白变大佬，这套学习路线让你少走弯路是认真的，欢迎讨论
软件开发技能点顺序参照：Java学习完整路线，强烈建议收藏转发
- 什么是CSS
- 四种CSS导入方式
- 选择器
- 盒子模型
1、什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、稿库、背景图片、网页浮动…
选择器规范
可以创建.css文件，在里面添加选择器代码，对样式进行设计
<!--规范
选择器{
声明1;
声明2;
}-->
2、四种CSS导入方式
优先级： 行内样式最优
其次 内部样式与外部样式的优先级以就近原则为准
就近原则：其二者谁在代码中离应用标签更近，优先级就更高
<head>
<meta charset="UTF-8">
<title>Example</title>
<!-- 内部样式-->
<style>
h1{
color: brown;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">你好</h1>
</body>
外部样式的两种写法
@import是CSS 2.1特有
<!-- 导入式-->
<style>
@import "css/test.css";
</style>
<!-- 链接式-->
<link rel="stylesheet" href="css/test.css">
3、选择器
作用：选择页面上的某一个或者某一类元素
基本选择器
优先级： id选择器>class选择器>标签选择器
(1)标签选择器
标签选择器，会选择到页面上所有的这个标签的元素
<style>
h1{
color: red;
}
</style>
(2)类选择器
类选择器的格式
.class的名称{}
<style>
.biaoti{
color: #b3d4fc;
}
.duanluo{
color: aqua;
}
</style>
</head>
<body>
<h1 class="biaoti">你好</h1>
<h1 class="duanluo">你好</h1>
</body>
(3)ID选择器
ID选择器格式
#id的名称{}
这里是引用
<style>
#biaoti{
color: red;
}
</style>
</head>
<body>
<h1 id="biaoti">标题1</h1>
</body>
层次选择器
(1)后代选择器
在某个元素的
后面所有部分
在body后面的p标签全部应用这个样式
<style>
body p{
background: #b3d4fc;
}
</style>
(2)子选择器
在某个元素的
后面一代
在body后面的仅下一级p标签全部应用这个样式
<style>
body>p{
background: #b3d4fc;
}
</style>
(3)相邻兄弟选择器
相邻(向下)，且只有一个
仅p2有对应样式
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
.active + p{
background: #b3d4fc;
}
</style>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
(4)通用选择器
当前选中元素向下的所有同级p标签元素应用样式(不限于p标签)
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
.active ~p{
background: #b3d4fc;
}
</style>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
</body>
结构伪类选择器
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: black;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: green;
}
/*选中p标签父元素(body)下的第一个标签，若该标签为p标签，则生效；否则不生效*/
p:nth-child(2){
background: red;
}
/*选中p标签父标签(body)下的第一个p标签*/
p:nth-of-type(2){
background: yellow;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
属性选择器
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
/*demo类下的a标签属性*/
.demo a{
font: bold 20px Arial;
color: #b3d4fc;
}
/*a标签中带有id属性的*/
a[id]{
background: yellow;
}
/*a标签中类包含item的(可以不只是包含item)*/
a[class *=item]{
background: black;
}
/*a标签中类仅包含links的*/
a[class = links]{
background: black;
}
/*a标签中href开头为http的*/
a[href ^=http]{
background: red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item" id = "first">你好</a>
</p>
</body>
4、盒子模型
Margin：外边距
padding：内边距
border：边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Margin, Border, Padding Example</title>
<style>
.box {
/*外边距定义元素周围的空间。它在元素的外边界之外，可以用来控制元素之间的距离。这里的 20px 表示在盒子的四周各有 20 像素的间距*/
margin: 20px;
/*边框是围绕元素内容和内边距的线条。这里的 5px 是边框的宽度，solid 表示边框的样式是实线，#000 是边框的颜色（黑色）*/
border: 5px solid #000;
/*内边距是内容与边框之间的空间。这里的 10px 表示内容与边框之间有 30 像素的距离。*/
padding: 30px;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box">This is a box</div>
</body>
</html>
