本篇接着上节html内容进行，适用于java后端所需要的视图展示
css 层叠样式表
- html + css 实现网页内容结构与表现的分离
css使用
- css需要与html配合使用
行内样式
- 将css样式代码写在指定的标签中，只对当前标签生效。
- 每一个html标签都有style属性
- 在style属性中编写css代码实现设计
中国
内嵌样式
- 在<style>标签中编写css代码，可以匹配多个标签 <style> p{ font-size:40; color:green; } </style>
引入样式
- 将上述<style>标签中的css代码，原封不动的复制到以.css结尾的文件中
- 在html中使用<style>或<link>引入css文件 <style> @import url(01.css); </style>
<link href="01.css" rel="stylesheet" type="text/css" />区别：
<style>只能引入css文件
<link> 可以引入css文件，也可以引入其他文件(浏览器选项卡图标)<style>引入css文件数量有限 <link>引入css文件数量无限 <style>网页内容加载完毕，在引入css <link>网页内容加载中，就引入css
- 注意：
- 如果3种方式设计了相同的标签
- 相同的设计采用就近原则 行内 > 内嵌,引入
- 不同的设计效果叠加
*补充：link引入选项卡图标
<link href="https://www.baidu.com/favicon.ico" rel="shortcut icon" type="images/x-icon" />css语法
- 选择器{样式属性:属性值;样式属性:属性值;.....}
- 选择器： 决定对哪些标签做设计
- 样式属性：对选择的标签做什么样的设计
p{
color:red;
font-size:20;
}
选择器种类：
标签选择器
- 使用标签的名字作为选择器
p{
color:red;
font-size:20;
}
- 使用标签的名字作为选择器
类选择器
.c1{color:orange;}
- 扩展：设置多个类选择器
- 在设置标签的class属性时，属性值可以使用空格隔开class="c1 c2 c3"
- 对于标签而言，class的属性值就是"c1 c2 c3"长度8
- 对于css类选择器而言，相当于3个选择器分别是.c1 .c2 .c3
- 扩展：设置多个类选择器
ID选择器
#c1{color:orange;}
- 注意： id与class基本使用很相似，但不能在一个标签上设置多个id属性值
属性选择器
<input type="text" name="sex" value="男" readonly="" /> ---- [name]{ ... } 找到设置了name属性标签 [name=sex]{ ... } 找到设置了属性name=sex标签 input[name]{ ... } 找到设置了属性name=sex标签 input[name=sex]{ ... } 找到input标签设置了属性name=sex标签后代选择器
由2个选择器配合完成寻找标签目的
以第一个选择器为基准，在其包含的所有标签中，找到符合第二个选择器对应的标签
两个选择器之间使用空格隔开p a{color:red}
2222- 33333 4444
- 注意：
a) 后代不一定直接后代
b) 多级后代选择器 p b a
p b a{}
直接后代选择器
p > a{color:red}相邻兄弟选择器
由2个选择器配合完成寻找标签目的
以第一个选择器为基准，找到其向下相邻那一个标签，然后再看看是否符合第二个选择器
2个选择器之间使用+隔开p+a{color:red;}
222 444 333相邻兄弟同胞选择器
由2个选择器配合完成寻找标签目的
以第一个选择器为基准，找到其向下相邻的所有标签，然后再看看是否符合第二个选择器
2个选择器之间使用隔开a{color:red;}
p伪类选择器
针对于超链接标签的不同状态
a:link{ ... } 对于发送请求时状态的设计
a:active{ ... } 对于正要发送请求时状态的设计
a:visited{ ... } 对于已经发送过请求时状态的设计
a:hover{ ... } 对于鼠标悬停时状态的设计注意： :hover可以作用在其他标签上 (只要标签占有一定的区域)
分组选择器
多个选择器使用逗号隔开，每个选择器对应的标签都要找到
h1,.h2,#h3,[h4],p h5{color:red;}通配符选择器
*{color:red;} 所有标签，建议慎用- 扩展：
- 除了上述选择器外，还有一些常见的选择器组合
- 1111
- 2222
- 3333
- 权重问题
- 通过各种各样选择器组合，最终可能找到相同的标签
- 此时就会出现多个选择器，设计相同标签
- 如果是不同的设计，叠加
- 如果是相同的设计，比较权重
- 权重相同，后者覆盖前者
- 优先权重大的选择器
!important 10000
行内选择器 1000 (256)
id选择 100
类选择、伪类、属性 10
标签选择 1
组合 0
- 除了上述选择器外，还有一些常见的选择器组合
样式属性
文字属性：
- p{color:red} 设置文字颜色
- 3种颜色设置
a) 英文单词 black，whilte，blue，green，red
b) rgb由红，绿，蓝三种颜色调和而成
* 没用颜色使用0-255表示亮暗
* rgb(0,0,0) , rgb(255,255,255) , rgb(255,255,0)
c) 16进制的rgb表示 00-FF
#FFFFFF
* 如果rgb每种颜色的2个符合都是相同的 00 11 22 ,aa bb cc ，可以只写一个符号012,abc
- 3种颜色设置
- p{font-size:30} 设置文字大小
- 单位：px(像素)，em(倍数) ,pt , mm , cm
- p{font-family:楷体} 设置字体
- 可以使用逗号设置多种字体，指示英文和中文字体
- p{text-align:center} 设置文字水平行位置
- 要求设计的标签必须是独占一行的标签 (p,h1,h2,li,....)
- 属性值： left(默认),center , right
- p{line-height:30px;} 设置行高
- 设置两行文字之间的空白
- 如果文字大小 < 行高 文字会默认处于行高的中间位置 16 < 32
- p{letter-spacing: 1em;} 设置文字符号之间的距离
- 可正，可负
- p{font-weight:bold;} 设置文字加粗
- p{text-decoration:underline;} 设置文字修饰
- none 没有修饰 ， underline 下划线，overline 上划线，line-through删除线
- p{color:red} 设置文字颜色
边框属性
- 只有标签有一定的展示区域，就可以设置边框
- 边框是由矩形区域4周组成(上右下左)
- 每一个方向的边框由粗细，颜色，形状组成
- 不指定位置，就是4个周同时设置
p{
border-width:2px; /粗细，大小/
border-color:#000; /颜色/
border-style:solid ; /*形状 solid实线 ， dashed虚线 ， dotted点状型 */
} - 扩展： 简写
p{border:2px #000 solid} - 扩展： 细致
p{border-top-width:4px;}
top/right/bottom/left - 扩展：边框圆角
p{border-radius:10px;} 设置边框圆角
轮廓属性
与边框属性效果类型
p{
outline-width:2px;
outline-color:#000;
outline-style:solid ;
}不能4个位置单独设置
在后面盒模型区域的大小计算中，不算做大小
背景属性
- 只要标签占有一定的区域，就可以设置背景
p{background-color:red;} 设置背景颜色
p{background-image:url(图片路径)} 设置背景图片- 背景图片会覆盖在背景颜色上
- 背景图片默认会横纵平铺
扩展：
a) p{background-repeat:no-repeat;} 设置背景图片平铺状态- repeat 默认 横纵平铺， no-repeat不平铺(1个)，repeat-x , repeat-y
b) p{backgrond-position:center center} 设置图片引入的位置,默认在左上角
left/center/right top/center/bottomx横向位置 y纵向位置 10 10 10% 10%- 注意： 图片引入的位置，与平铺无关
- repeat 默认 横纵平铺， no-repeat不平铺(1个)，repeat-x , repeat-y
- 只要标签占有一定的区域，就可以设置背景
列表属性
li{list-style-type:none} 设置列表项前面的图片
* none(无图标),circle,square ,disc表格属性
table{border-collapse: collapse;} 设置表格边框坍塌效果(合二为一)盒模型属性
- 设置标签区域所占的大小
- 从盒模型设计角度而言，所有的html标签大约分成3类
a) 块元素
* 可以设置宽高
* 标签内容独占一行
* p,li,ul,ol,dl,dt,dd,h1,h2,h3,...,div(纯净)
b) 行元素
* 不能设置宽高，宽高由内容决定
* 可以与其他行元素共处一行
* a,b,font,del,span
c) 表格元素- 注意： 这些标签的行，块特点并不是固定，可以通过css属性进行改变
div{display:inline;} 设置标签渲染(显示)盒子类型
inline：将标签按照行元素特点渲染
block：将标签按照块元素特点渲染
none： 不渲染标签(隐藏)
inline-block： 一行中的块元素，多个块元素共处一行
- 注意： 这些标签的行，块特点并不是固定，可以通过css属性进行改变
- 控制盒子大小的属性
div{width:100px; height:100px;} 设置块元素内容的宽高
div{padding:10px;} 设置所有盒子的内边距(盒子边界与内容之间的距离)
- 内边距有4个方向组成，可以设置4个不同方向内边距
padding:10px 设置4个方向都是10
padding-top/right/bottom/left 设置4个方向不同的内边距
- 内边距有4个方向组成，可以设置4个不同方向内边距
div{border:1px solid #000;} 设置盒子边框
div{margin:10px;} 设置盒子的外边距(两个盒子之间的距离)
margin-top/right/bottom/left扩展：
- 设置盒子内容宽高时，可以使用百分比
- 盒子会随着浏览器的伸缩，而变大变小
- 可以使用min-width/min-height , max-width/max-height 设置大小边界
扩展：
- 当盒子内容大于盒子区域时，就会产生移出
- 可以使用overflow设置移出后内容的处理
div{overflow:hidden};
visible：溢出部分可见(默认)
hidden: 溢出部分隐藏
auto: 溢出部分自动出现滚动条
定位属性：
- 盒子布局，设置盒子摆放
- 定位属性：
div{
left:10px;
top:10px;
bottom:10px;
right:10px;
}
盒子要摆放的位置距上下左右的距离- 注意： 只设置上述位置属性还不行，还需要指定定位类型
- 定位类型属性
div{position:absolute;} 设置定位类型
absolute ： 绝对定位
* 将盒子从原位置高高拿起
* 放弃盒子原来所占有的位置，其他内容就可以占用，可能出现覆盖的视觉效果
* 绝对定位时会参照已定位的父级标签的边界或浏览器边界
relative ： 相对定位
* 将盒子从原位置高高拿起
* 不会放弃原来的位置
* 相对定位时参照的是原位置
left:50px; 盒子的原位置在盒子左边边界左侧，盒子向右移动
right:50px; 盒子的原位置在盒子左边界的右侧，盒子向左移动了 - 浮动属性(可变位置)
- 可以实现竖着摆放的盒子，横向摆放
li{float:left;} 设置左浮动
left/right- 将盒子从原位置轻轻拿起 (定位可以认为是很高拿起)
- 原位置被释放
- 拿起的盒子在当前行最左或最右放置，如果最左/最右已经有盒子了，那就紧挨着排放
- 扩展：
div{clear:both;} 清除因其他标签浮动，对单签标签造成的影响。
- 可以实现竖着摆放的盒子，横向摆放
透明度属性
div{opcity:0.5} 设置盒子的透明度 0.0-1.0
** 大家有什么问题可以在评论区提问，如果觉得有帮助请给作者点个赞**
版权归原作者 aqsfdx-fx 所有， 如有侵权，请联系我们删除。