- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
Java基础笔记15_css
day 30
30-01
css:
是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重叠,提高后期样式代码的可维护性,并增强了网页的现实效果功能。
CSS将网页内容和显示样式进行分离,提高了显示功能。
css和html结合的方式:
每一个html标签中都有一个style样式的属性。style属性的值是CSS代码。
div style ”background-color:red;color:green” 区域
使用style标签的样式,一般定义在head标签中。
用的是CSS代码,作用于div中的background、color中。
style type ”text/css” div background-color:red;color:green 这样的标签一般定义在head部分。
30-02
3.将CSS封装成文件,进行导入。 用CSS代码导入的
新建css,将div background-color:red;color:green 进行封装。 @import url 1.css ; //将文件1.css导入 CSS中的注释:/* */只有这一种
4.用HTML进行链接的。
link rel ”stylesheet” href ”1.css” type ”text/css” /
样式优先级:由上到下,由外到内,优先级由低到高。一般是后加载的为主。
CSS代码格式:
选择器名称 属性名:属性值;属性名:属性值……
30-03
选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。容器
选择器有三种:
HTML标签名选择器,使用的就是HTML的标签名。
class选择器,其实使用的就是标签中的class属性。
div class ”haha” 区域 div.haha background-color:red;color:green
haha前面不加div,则说明所有类名为haha的标签全部按统一属性加载。
预定义样式(已经定义.heihei,但是暂时还没有标签使用),可以实现动态的加载。
id选择器,其实使用的是标签中的id属性。通常id的取值在页面中是唯一的,因为该属性除了给CSS使用,还可以被js javascript 使用,id通常都是为了标识页面中的一些特定区域使用的。
div id ”haha” 区域 div#haha background-color:red;color:green
优先级:标签选择器 类选择器 id选择器 style属性
30-04
扩展选择器:
关联选择器。
span b //只对span标签中的b标签(选择器中的选择器)进行样式设定,中间用空格隔开。
组合选择器。对多中选择器进行相同样式的设定,中间用逗号隔开。
.haha,div b
30-05
3.伪元素选择器。其实就是在HTML中预定义的一些选择器,称为伪元素。
格式:标签名:伪元素.类名 或者 标签名:伪元素
超链接的状态:
1.未访问。text-decoration:none:去掉下划线
a:link
background-color:blue; color:white; text-decoration:none ; font-size:18px; 2.鼠标悬停:
a:hover
background-color:blue; color:white; font-size:24px; 3.点击效果
a:active 4.访问后效果
a:visited 一般点击前和点击后效果一样。l v
30-06
p:first-letter //段落首字母
焦点:input:focus 30-07
css样式的结合应用: style type ”text/css”
ul: list-style-type:none; list-style-image:url 1.bmp 无序列表 30-08
流行的布局方式:div+css
盒子模型:div
边框:border 上border-top 下border-bottom 左border-left 右border-right
内边距:padding内容距离盒子边框的距离
padding:20px 100px //第一个负责上下边距,第二个负责左右边距,(如果有四个:上右下左)。如果只有一个数值,则负责上下左右四个边距。
也可以分别设置。
外边距:margin 盒子距离外部的距离。
当margin:0px时,盒子离浏览器边框还有一定距离。其实那是body离浏览器的距离,盒子是在body里面的。可以设置body magin:0px
30-09
布局:
文档评论(0)