JavaWeb学习——CSS
1.概念 Cascading Style Sheets 层叠样式表 简称 CSS
- 层叠:多个样式可以作用在同一个html元素上,同时生效
- 相对于html,功能更加强大
- 将内容展示和样式控制分离,降低了耦合度
- 使分工协作更加容易
- CSS的使用提高了开发效率
- CSS需与html结合使用
- 内联样式(不常用)
- 在标签内使用style属性指定css代码
如:
hello css
- 在标签内使用style属性指定css代码
- 内部样式(常用)
- 在head标签内,定义style标签,style标签的标签体内容就是css代码
如: > div{ color:blue; }
hello css
- 外部样式(常用)
- 定义css资源文件。
- 在head标签内,定义link标签,引入外部的资源文件
/*a.css文件*/ div{ color:green; }
> @import "css/a.css";
hello csshello css
- 作用范围: 外部样式>内部样式>内联样式
- CSS语法:
- 格式:
-
选择器{ 属性名1:属性值1; 属性名2:属性值2; ... }
- 选择器:筛选具有相似特征的元素
- 注意: 每一对属性需要使用 ;隔开,最后一对属性可以不加;
-
- 格式:
- 选择器:筛选具体相似特征的元素
- 分类:
- 基础选择器:
- id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 语法:#id属性值{}
- 元素选择器:选择具有相同标签名称的元素
- 语法: 标签名称{}
- 注意:id选择器优先级高于元素选择器
- 类选择器:选择具有相同的class属性值的元素。
- 语法:.class属性值{}
- 注意:类选择器选择器优先级高于元素选择器
- 优先级:id选择器>类选择器>元素选择器
- id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 扩展选择器:
- 选择所有元素:
- 语法: *{}
- 并集选择器:
- 选择器1,选择器2{}
- 子选择器:筛选选择器1元素下的选择器2元素
- 语法: 选择器1 选择器2{}
- 父选择器:筛选选择器2的父元素选择器1
- 语法: 选择器1 > 选择器2{}
- 属性选择器:选择元素名称,属性名=属性值的元素
- 语法: 元素名称[属性名=“属性值”]{}
- 伪类选择器:选择一些元素具有的状态
- 语法: 元素:状态{}
-
如: * 状态: * link:初始化的状态 * visited:被访问过的状态 * active:正在访问状态 * hover:鼠标悬浮状态
- 语法: 元素:状态{}
- 选择所有元素:
- 基础选择器:
- 分类:
- 属性:
- 字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对其方式
- line-height:行高
- 背景
- background:
- 边框
- border:设置边框,符合属性
- 尺寸
- width:宽度
- height:高度
- 盒子模型:控制布局
- margin:外边距
- padding:内边距
- 默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
- float:浮动
- left
- right
- left
- margin:外边距
文章图片
- 字体、文本
1.将整张图分为五个部分
2.body为一部分,中间的矩形为一个div,矩形由左、中、右三部分div组成
3.用元素选择器选择body设置背景图,再为中间四个div分别设置不同的class名
4.用类选择器为四个div分别设置样式,矩形中的三个div用float属性来布局
5.在矩形中间的div中定义一个表单form,在表单下通过table来进行具体的布局设置
代码实现:
注册页面 - 锐客网
>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png")center;
padding-top: 25px;
}.reg_layout{
width: 1200px;
height: 800px;
border: 15px solid gray;
background: white;
margin: auto;
}.reg_left{
float: left;
padding: 15px;
}
.reg_center{
float: left;
padding-left:150px;
padding-top: 30px;
}
.reg_right{
float: right;
padding: 15px;
}
.reg_left p:first-child{
font-size: 25px;
color: #ff9802;
}
.reg_left p:last-child{
font-size: 25px;
color: gray;
}
.reg_right p{
font-size: 15px;
}
.reg_right p a{
color: pink;
}.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}#username,#password,#name,#email,#phone,#checkcode{
width: 300px;
height: 30px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius:5px;
padding-left: 10px;
}#checkcode{
width: 150px;
}#img_check{
vertical-align: middle;
}#reg_sub{
width: 100px;
height: 50px;
border:1px solid #ff9802;
background: #ff9802;
align-self: center;
}
4.总结 通过简单试验后得出的一般结论:选择器范围越小优先级越高
该文章只学习了部分CSS的知识更多内容可参考https://www.runoob.com/css/css-tutorial.html
【JavaWeb|JavaWeb学习——CSS】学习视频:https://www.bilibili.com/video/BV1qv4y1o79t
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- javaweb|基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——用户注册(14)
- flex|C语言-使用goto语句从循环中跳出