web之css(个人学习笔记)
来源:互联网 发布:暴利产品淘宝客推广 编辑:程序博客网 时间:2024/04/30 08:17
css在jsp中加载方式。
<link href="<%= request.getContextPath()%>/css/login.css" type="text/css" rel="stylesheet">
css的简介
css:层叠样式表层叠:一层一层的优先级
样式表:很多的属性和属性值
使页面显示效果更加美观
css将网页内容和显示样式进行分离,提高了显示功能
css和html的结合方式(四种方式)
(1)在每个html标签上面都有一个属性style,把css和html结合在一起
<div style="background-color:red;color:green;">
(2)使用html的一个标签实现<style>标签,写在head里面
<style type="text/css">
css代码
</style>
例:<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
(3)在style标签里面 使用语句(在某些浏览器下不起作用)不常用
@import url(css文件的路径);
和第二种一样也是写在头文件里
第一步,创建一个css文件,文件内容如下,名称为1.css
div{
background-color:blue;
color:red;
}
然后<style type="text/css">
@import url(1.css);
</style>
(4)使用头标签link,引入外部css文件(最常用)
第一步,创建一个css文件,文件内容如下,名称为1.css
div{
background-color:blue;
color:red;
}
将文件路径添加其中
<link rel="stylesheet" type="text/css" href="1.css">
css优先级(一般情况)
由上到下,由外到内,优先级由低到高,后加载的优先级高
优先级排序:style>id选择器>class选择器>标签选择器
css的基本选择器(三种)
要对哪个标签里面的数据进行操作
(1)标签选择器
使用标签名作为选择器的名称
div{
background-color:blue;
color:red;
}
(2)class选择器
每个html标签都有一个属性class
<div class="haha">adasd</div>
<p class="haha">asdf</p>
.haha{
background-color:orange;
}
(3)id选择器
每个html标签上面都有一个属性id
<div id="a">654</div>
<p id="a">21</p>
#a{
background-color:orange;
}
css的扩展选择器
(1)关联选择器
<div><p>saffsdfds</p></div>
设置div标签里面p标签的样式,嵌套标签里面的样式
div p{
background-color:green;
}
(2)组合选择器
<div>321</div>
<p>32154</p>
把div和p标签设置成相同的样式,吧不同的标签设置成相同的样式
div,p{
bancground-color:red;
}
(3)伪元素选择器
css里面提供了一些定义好的样式,可以拿过来使用
以超链接为例
超链接的状态
原始状态 鼠标放上去的状态点击点击之后
:link :hover:active:visited
css的盒子模型
在进行布局前需要把数据封装到一块一块的区域内(div)
(1)边框
border:2px solid blue; 粗细、样式、颜色
border:上面是进行统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
(2)内边距
padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个外边距与上面类似
(3)外边距
margin:20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距与上面类似
css的布局的漂浮(了解)(div)
float:
属性值
left:文本流向对象的右边
right:文本流向对象的左边
css的布局的定位(div)
position:
属性值
absolute:
将对象从文档流中拖出
可以使用top、bottom、left、right等属性进行定位(一般适用于网页上的浮动广告)
relative:
不会把对象从文档流中拖出
可以使用top、bottom、left、right等属性进行定位
图文混排的案例
将图片与文字分别封装进div标签,再将两个div标签放进一个大的div标签,分别设置属性即可
图像签名
在图片上显示文字
将图片封装进div,设置position属性即可
0 0
- web之css(个人学习笔记)
- CSS+DIV个人学习笔记
- css-day4-个人学习笔记
- css-day5-个人学习笔记
- css-day6-个人学习笔记
- css-day7-个人学习笔记
- HTML+css 个人学习笔记
- Mybatis学习之个人笔记(一)
- Html+css+javascript个人学习笔记
- web 学习笔记2-CSS
- Web前端,遇到的IE6兼容性问题及解决(个人笔记,CSS施工中)
- CSS学习笔记(三):CSS之盒模式
- 《十天学会web标准(div+css)》学习笔记
- WEB学习笔记(三):CSS基本标签的使用
- WEB前端(HTML、XML、CSS、JS)学习笔记
- CSS基础(一) 个人笔记
- CSS基础(二) 个人笔记
- CSS基础(三) 个人笔记
- boost 环境搭建笔记
- 预编译头文件(stdafx.h)的原理及其工程应用
- ubuntu 16.04LTS 下更新时提示/boot“磁盘空间不足”
- eclipse 自动补全代码设置
- 再次认识Struts2(三)
- web之css(个人学习笔记)
- mysql数据库表分区小结
- Linux内核编译时会遇到的问题--缺少mkimage
- Spring Boot Http 406 error
- Linux系统调用--getrlimit()与setrlimit()函数详解
- java使用jaxb操作xml示例
- Angular Module声明和获取重载
- Java复制文件夹
- 我的Android学习之路(2)—四大组件