JavaWeb——CSS总结
1.什么是CSS
CSS：层叠样式（样式可以叠加）
2.CSS的作用
虽然HTML的某些标签的属性可以设置样式效果，但细节处理起来远远不够。
HTML实现的样式效果会出现大量重复代码，维护成本低。
CSS作用：
-
能够做到内容与网页分离，对网页中元素的位置排版等效果进行像素级的精准控制。
-
用来美化页面，需要依赖HTML。
3.CSS的基本使用
3.1CSS基本语法
【格式】
选择器 {
属性: 属性值;
.....
}
【示例】样式设在<style>标签中：type="text/css"
<style type="text/css">
body {
background-color: aqua; /*背景颜色*/
color: blue; /*字体颜色*/
font-size: 20px; /*字体大小*/
}
</style>
注意：
-
CSS声明要以分号结尾，声明要用{ }括起来
-
建议一行写一个声明
-
如果属性值有多个单词组成，要给值加上引号
CSS注释：
/* 注释的内容 */
4.CSS的使用
4.1行内样式
样式定义在HTML标签上的style属性中:
一行一行的写，以行内压样式写的CSS耦合度较高
【参考代码】
<body>
<!-- 1. 行内样式:耦合度高 -->
<p style="color: blue;font-family: 楷体;font-size: 20px;">我是段落噢</p>
<p style="color: blue;font-family: 楷体;font-size: 20px;">我是段落噢</p>
<p style="color: blue;font-family: 楷体;font-size: 20px;">我是段落噢</p>
<p style="color: blue;font-family: 楷体;font-size: 20px;">我是段落噢</p>
</body>
4.2内部样式
定义在html<head>标签中的<style>标签中
<style>
/* p标签 */
p {
color: blue;
font-family: 楷体;
font-size: 20px;
}
</style>
4.3外部样式
在实际开发中，很多时候都引入外部样式文件，这种形式可以html页面更加清晰，而且可以达到更好的重用效果
1.在CSS文件夹中建一个xxx.css文件然后直接写样式：
2.在html中通过<link>标签引入外部的css文件，例如：<link rel="stylesheet" style="text/css" href="css/style.css">
rel：当前文件与引入文件的关系
style：类型：css类型
注：CSS的优先级——就近原则
5.CSS选择器
在css中，选择器是一种模式，用于选择需要添加样式的元素。
css选择器非常多，掌握常用的几种即可。
5.1基本选择器
5.1.1通用选择器
特点：选择所有元素
定义格式：
* {
属性：属性值;
....
}
* {
color: red;
background-color: aqua;
font-size: large;
font-family: "宋体";
}
5.1.2元素/标签选择器
特点：选择指定标签，对其样式进行修改(指定标签可以为多个，样式一样，如多个div标签)
定义格式：
标签名 {
属性：属性值;
....
}
div {
height: 100px; /* div的高度 */
width: 100px; /* div的高度 */
background-color: aqua; /*背景颜色*/
}
5.1.3id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
格式：
选择指定id属性值的元素 #
#id属性值 {
属性名: 属性值;
....
}
【示例】<div id="div1">我是div1</div>
#div1 {
height: 100px; /* div的高度 */
width: 100px; /* div的高度 */
background-color: aqua; /*背景颜色*/
}
注：
id值最好保持唯一性!
id定义规则：以字母、数字、下划线组成，不能以数字开头
定义格式：
#para1 {
text-align:center;
color:red;
}
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
5.1.4类选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
类选择器以一个点"."号显示：
定义格式：
选择指定class属性的元素
.class属性值 {
属性名: 属性值;
....
}
【示例】<div class="cls1">我是div</div>
.cls1 {
font-weight: bold; /* 字体粗细 */
font-size: 100px; /* 字体大小 */
}
5.1.5分组选择器(了解)
选择指定选择器选中的元素
选择器1,选择器2,选择器3，...{
属性名: 属性值;
....
}
【示例】
<div id="div1">我是div1</div>
<div class="cls1">我是div</div>
<p>我是段落噢</p>
#div1,.cls1,p{
/* 边框 边框的粗细 边框的风格 边框的颜色
border: 20px solid #0000FF;
}
选择器优先级：（权重值）
id选择器 100 > 类选择器 10 > 元素选择器 1 > 通用选择器
行内样式 style属性中 权重是1000
5.2.组合选择器
css中组合选择器说明了两个选择器之间的关系。css组合选择器包括各种简单选择符的组合方式
在css包含四种组合方式：后代选择器(以空格分隔)，子元素选择器(以大于号分隔)，相邻兄弟选择器(以加号分隔)，普通兄弟选择器(以波浪线分隔)
5.2.1后代选择器(派生选择器)
定义格式：
后代选择器(以空格分隔)
指定元素 指定后代元素{
属性值: 属性名
....
}
【参考示例】
.food li {
border: 10px solid red;
}
<h1>食物</h1>
<ul class="food"> /* 只要在我的标签里面，满足条件的都是后代 */
<li>水果
<ol>
<li>苹果</li>
<li>西瓜</li>
<li>香蕉</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>白菜</li>
<li>卷心菜</li>
<li>茄子</li>
</ol>
</li>
</ul>
显示图：
5.2.2子元素选择器
用于选择指定标签元素的所有第一代子元素，以大于号分隔
定义格式：
选择器1 > 选择器2 {
属性名:属性值;
....
}
【参考示例】
.food > li {
border: 10px solid red;
}
<h1>食物</h1>
<ul class="food"> /* 子代选择器：只会找第一代满足条件的元素 */
<li>水果
<ol>
<li>苹果</li>
<li>西瓜</li>
<li>香蕉</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>白菜</li>
<li>卷心菜</li>
<li>茄子</li>
</ol>
</li>
</ul>
显示图：
5.2.3相邻兄弟选择器
找某一个元素挨着的下一个元素，下一个元素必须是同级标签，且二者具有相同的父元素。以加号分隔
定义格式：
选择器1 + 选择器2 {
属性名:属性值;
....
}
示例：
#d + div { /* 相邻兄弟选择器:挨着我的，且是指定的div标签 */
color: red;
border: aqua;
}
<div id="d">
相邻兄弟选择器1
<ul>
<li>小明</li>
<li>小蓝</li>
<li>小红</li>
</ul>
</div>
<div>相邻兄弟选择器2</div>
<div>相邻兄弟选择器3 </div>
<p>相邻兄弟选择器4</p>
显示图：
5.2.4普通兄弟选择器
选择紧接在另一元素后所有的元素，且二者具有相同的父元素。以波浪线分隔
定义格式
选择器1 ~ 选择器2 {
属性名:属性值;
....
}
示例：
#tt ~ li {
color: red;
border: aqua;
}
<div>
普通兄弟选择器1 /* 普通兄弟选择器: 满足条件的往后找
<ul>
<li>小林</li>
<li id="tt">小明</li>
<li>小蓝</li>
<li>小红</li>
<li>小绿</li>
</ul>
</div>
显示图：
注：后代选择器和子代选择器用的比较多
6.CSS常用属性设置
6.1背景
CSS背景属性用于定义HTML元素的背景效果
6.1.1.background-color
设置元素的背景颜色
/* 通过元素选择器获取body元素 */
body {
/* 设置元素背景颜色 */
background-color: #00FFFF;
}
6.1.2.background-image
设置元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
/* 通过元素选择器获取body元素 */
body {
/* 设置元素的背景图片，默认图片重复显示 */
background-image: url(imgs/3.jpg);
}
6.1.3.background-repeat
设置是否及如何重复背景图像
/* 通过元素选择器获取body元素 */
body {
background-image: url(imgs/3.jpg);
/* 设置元素的背景图片是否重复 no-repeat：表示不重复 repeat-x:横向重复 repeat-y:纵向重复 repeat:横向纵向重复*/
background-repeat: no-repeat;
/* 设置元素背景图片的大小 */
background-size: 400px 400px;
}
6.1.3.background-size
设置及调整背景图片的大小
/* 通过元素选择器获取body元素 */
body {
background-image: url(imgs/3.jpg);
/* 设置元素背景图片的大小 */
background-size: 400px 400px;
}
6.2文本
6.2.1.color
body {
color:blue;
}
h1 {
color: #0000FF;
}
h2 {
color: rgb(255,0,0);
}
6.2.2text-align
设置文本对齐方式，center(居中)，left(左对齐)，right(右对齐)
h2 {
/* text-align: right; */ /* 右对齐 */
/* text-align: left; */ /* 左对齐 */
text-align: center; /* 居中对齐 */
}
6.2.3text-decoration
文本修饰，overline(上划线)，underline(下划线)，line-though(中划线)
#d3 {
/* 设置上划线 */
text-decoration: overline;
/* 设置下划线 */
text-decoration: underline;
/* 设置中划线 */
text-decoration: line-through;
/* 同时设置 上中下划线 */
text-decoration: overline underline line-through;
}
去除文本修饰如：超链接标签默认带有的下划线
a {
/* 去除文本修饰 */
text-decoration: none;
}
6.2.4.text-indent
设置文本首行缩进(缩进两个文字)： 1em表示一个文字高度
#p1 {
/* 设置首行缩进 */
text-indent: 2em
}
6.3字体
6.3.1.font-family
文本字体，该属性设置文本的字体风格
font-family属性应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，它将尝试下一种字体，所以尽量将不常见的字体靠前，常见字体放到后面，作为替补。
注意：
1）只有字体名中含有空格或#、$之类的符合时，才需要font-family声明中加引号。
#d1 {
/* 设置字体 */
font-family: 楷体;
font-family: "agency fb";
}
2）多个字体系列是用一个逗号分隔指明
/* 靠前的字体先生效 */
#d1 {
/* 设置字体 */
font-family: "agency fb",楷体,宋体;
}
6.3.2.font-size
文本大小
#d1 {
font-size: 100px;
}
6.3.3.font-style
设置字体风格：normal：正常体，italic：斜体，oblique：强制斜体
#d1 {
/* 设置字体风格 */
font-style: normal;
font-style: italic;
font-style: oblique;
}
6.3.4.font-weight
设置字体的粗细：blod:粗体。100~900值越大字体越粗：400：正常字体，700：粗体
#d1 {
/* 设置字体粗细 */
font-weight: 100;
}
6.4对齐方式
设置元素中字体的水平对齐方式text-align:
-
left
-
right
-
center
-
justify 左右对齐（两端对齐）
p {
text-align: justify;
}
6.5display属性
display属性：规定元素生成框的类型
-
block 元素会被显示，且元素会变成块级元素，元素前后会有换行符
-
none 元素会被隐藏，但真实存在
-
inline 元素会被显示为行内元素，元素前后没有换行符
-
inline-block 行内块级元素
块级元素： 可以设置元素的宽高和边距，元素会自动换行
行内元素： 不可以设置元素的宽高和边距，元素不会自动换行
行内块元素： 可以设置元素的宽高和边距，元素不会自动换行
【示例参考】
#span1 {
/* 隐藏元素 */
display: none;
}
/* 变 块级元素 display: block */
#span2 {
background-color: #00FFFF;
/* 行内元素无法设置宽高 */
width: 100px;
height: 100px;
/* 把行内元素span转成块级元素就可以显示宽高了 */
display: block;
}
/* 变 行内元素 display: inline */
div {
/* 将div块级元素转成了行内元素，就不可以设置元素的宽高和边距，元素不会自动换行 */
display: inline;
/* 把块级元素div转成行内元素就不可以显示宽高了 */
height: 100px;
}
/* 变行内块级元素 inline-block */
p {
background-color: #00FFFF;
width: 200px;
height: 200px;
/* 可以设置元素的宽高和边距，元素不会自动换行 */
display: inline-block;
}
【总结】
-
行内元素变块级元素：
display: block元素会被显示，可以设置元素的宽高和边距，元素会自动换行
#span2 {
background-color: #00FFFF;
width: 100px;
/* 行内元素无法设置显示宽高 */
height: 100px;
display: block;/* 把行内元素span转成块级元素就可以显示宽高了 */
}
-
块级元素变行内元素：
display: inline元素会被显示为行内元素，元素前后没有换行符，不可以在设置元素的宽高和边距了
div {
display: inline;/* 将div块级元素转成了行内元素，就不可以设置元素的宽高和边距，元素不会自动换行
height: 100px;/* 把块级元素div转成行内元素就不可以显示宽高了 */
}
-
块级元素变行内块级元素：
display: inline-block还可以设置元素的宽高和边距，但元素不会自动换行来
p {
background-color: #00FFFF;
width: 200px;
height: 200px;
/* 还可以设置元素的宽高和边距，但元素不会自动换行来 */
display: inline-block;
}
6.6浮动
float的属性值有none，left，right。
1.只有横向浮动，并没有纵向浮动。
2.会将元素的display属性变更为block。
3.浮动元素的前一个元素不会受到任何影响（如果你想让两个块元素并排显示，必须让两个块级元素都应用float）
4.浮动元素的后一个元素会围绕着浮动元素(典型应用是文字围绕图片)
【两个块元素并排显示】
视图显示：
【文字围绕图片】