Java EE之旅02 CSS基础
###css的简介
####什么是css
- 概念:层叠样式表,css是对html进行样式修饰语言
- 层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级高的,不冲突的部分共同作用
- 样式表:就是css属性样式的集合
####css的作用
- 修饰html的 使其html样式更加好看
- 提高样式代码的复用性
- html的内容与样式相分离 便于后期维护。类似于Android中的Style。
####css的引入方式和书写规范
(1)内嵌样式内嵌样式是把css的代码嵌入到html标签中<div style="color:red;font-size: 100px;">你好啊 小朋友</div>语法:(1)使用style属性将样式嵌入到html标签中(2)属性的写法:属性:属性值(3)多个属性之间使用分号;隔开不建议使用
(2)内部样式在head标签中使用style标签进行css的引入<style type="text/css">div{color:red;font-size: 100px;}</style>语法:(1)使用style标签进行css的引入<style type="text/css">属性:type:告知浏览器使用css解析器去解析(2)属性的写法:属性:属性值(3)多个属性之间使用分号;隔开(3)外部样式(用得最多)将css样式抽取成一个单独css文件 谁去使用谁就引用<link rel="stylesheet" type="text/css" href="demo1.css"/>语法:(1)创建css文件 将css属性写在css文件中(2)在head中使用link标签进行引入<link rel="stylesheet" type="text/css" href="css文件地址"/>rel:代表要引入的文件与html的关系type:告知浏览器使用css解析器去解析href:css文件地址(3)属性的写法:属性:属性值(4)多个属性之间使用分号;隔开
(4)@import方式<style type="text/css">@import url("css地址");</style>link与@import方式的区别:(1)link所有浏览器都支持 import部分低版本IE不支持(2)import方式是等待html加载完毕之后再加载(3)import方式不支持js的动态修改
复制代码
###css选择器
1、基本选择器(1)元素选择器语法:html标签名{css属性}示例:<span>hello css!!!</span><style type="text/css">span{color:red;font-size:100px; }</style>(2)id选择器 id唯一性语法:#id的值{css属性}示例:<div id="div1">hello css1!!!</div><div id="div2">hello css2!!!</div><style type="text/css">#div1{background-color: red;}#div2{background-color: pink;}</style>(3)class选择器语法:.class的值{css属性}示例:<div class="style1">div1</div><div class="style1">div2</div><div class="style2">div3</div><style type="text/css">.style1{background-color: red}.style2{background-color: pink}</style>***选择器的优先级:id>class>元素,优先级高的会覆盖低的2、属性选择器语法:基本选择器[属性=‘属性值’]{css属性}示例:<form action="">name:<input type="text" /><br/>pass:<input type="password" /><br/></form><style type="text/css">input[type='text']{background-color: yellow}input[type='password']{background-color: pink}</style> 3、伪元素选择器a标签的伪元素选择器语法:静止状态 a:link{css属性}悬浮状态 a:hover{css属性}触发状态 a:active{css属性}完成状态 a:visited{css属性}示例:<a href="#">点击我吧</a><style type="text/css">a:link{color:blue}a:hover{color:red}a:active{color:yellow}a:visited{color:green}</style> 4、层级选择器语法:父级选择器 子级选择器 .....示例:<div id="d1"><div class="dd1"><span>span1-1</span></div><div class="dd2"><span>span1-2</span></div></div><div id="d2"><div class="dd1"><span>span1-1</span></div><div class="dd2"><span>span1-2</span></div></div><style type="text/css">#d1 .dd2 span{color:red}</style>
复制代码
###css属性
1、文字属性font-size:大小font-family:字体类型 2、文本属性color:颜色text-decoration:下划线属性值:none underline text-align:对齐方式属性值:left center right<div>hello css!!!</div><a href="#">click me!!!</a><style type="text/css">div{color:red;text-decoration: underline;text-align: right }a{text-decoration: none;}</style>3、背景属性background-color:背景颜色background-image:背景图片属性值:url("图片地址");background-repeat:平铺方式属性值:默认横向纵向平铺repeat:横向纵向平铺no-repeat:不平铺repeat-y:纵向repeat-x:横向body{background-color: black;background-image: url("images/dog.gif");background-repeat: repeat-y;}4、列表属性list-style-type:列表项前的小标志属性值:太多了list-style-image:列表项前的小图片属性值:url("图片地址");<ul><li>黑马程序员</li><li>黑马程序员</li><li>黑马程序员</li><li>黑马程序员</li></ul><style type="text/css">/* ul{list-style-type: decimal-leading-zero;} */ul{list-style-image: url("images/forward.gif");}</style>5、尺寸属性 width:宽度height:高度<div id="d1">div1</div><div id="d2">div2</div><style type="text/css">#d1{background-color: red;width: 200px;height: 200px;}#d2{background-color: pink;width: 200px;height: 200px;}</style>6、显示属性display:属性值:none:隐藏block:块级显示inline:行级显示<form action="">name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span><br>pass:<input id="pass" type="password" /><br><input id="btn" type="button" value="button" /></form><style type="text/css">span{color:red;display: none}</style><script type="text/javascript">document.getElementById("btn").onclick = function(){document.getElementById("span").style.display = "inline";};</script>7、浮动属性float:属性值:left rightclear:清除浮动 left right both缺点: (1)影响相邻元素不能正常显示(2)影响父元素不能正常显示
复制代码
###css盒子模型
相关的概念与Android类似,如下图所示:
盒模型中相关的概念有:
border:border-width:边框的宽度border-color:边框的颜色border-style:边框的线型border-top:上边框border-bottom:下边框border-left:左边框border-right:右边框padding:代表边框内壁与内部元素之间的距离padding:10px;代表上下左右都是10pxpadding:1px 2px 3px 4px;上右下左padding:1px 2px;上下/左右padding:1px 2px 3px;padding-top:单独设置margin:代表边框外壁与其他元素之间的距离margin:10px;代表上下左右都是10pxmargin:1px 2px 3px 4px;上右下左margin:1px 2px;上下/左右margin:1px 2px 3px;margin-top:单独设置
复制代码
Java EE之旅02 CSS基础相关推荐
- 02.CSS基础笔记及导入
CSS是什么 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS样式 CSS引 ...
- Eclipse IDE for Java EE Developers 与Eclipse Classic 区别
eclipse下载官网:eclipse下载 版本: 1.eclipse classic 是eclipse的标准版:标准版; 2.eclipse ide for java developer : 标准版 ...
- Java EE过去,现在和云7
最近的JavaOne 2011的一个突出主题是下一个主要的Java EE 7版本. 正如主题发言中所述,有关工作正在进行中. 它将包含我们已经从先行者那里知道的28个规范以及一些新规范. 没人可以告诉 ...
- java se与java ee的区别
JavaEE: Java Enterprise Edition,Java企业版,多用于企业级开发,包括web开发等等.企业版本帮助开发和部署可移植.健壮.可伸缩切安全的服务端Java应用. Java ...
- [JAVA EE] JPA技术基础:完成数据列表的删除
接上一篇:[JAVA EE] JPA技术基础:完成数据列表显示 本章完成数据列表的删除 修改 UserController.java package com.example.demo.controll ...
- Java EE开发基础
Java EE开发基础 软件架构 单机软件:需要安装,不需要联网 B/S架构:Browser/Server(浏览器/服务器),需要网络通信,不需要安装 C/S架构:Client/Server(客户端/ ...
- java ee基础知识_Java EE:基础知识
java ee基础知识 想要了解一些基本原则,即与Java EE相关的技术术语. 对于许多人来说,Java EE / J2EE仍然最多意味着Servlet,JSP或Struts. 没有冒犯或双关语! ...
- Java EE:基础知识
想要了解一些基本原则,即与Java EE相关的技术术语. 对于许多人来说,Java EE / J2EE仍然最多意味着Servlet,JSP或Struts. 没有冒犯或双关语! 无论如何,这不是Java ...
- Java基础-02(基础语法)
Java基础-02(基础语法) 一 注释 加粗样式 注释用来解释和说明程序的文字,注释是不会被执行的. 1.1单行注释 //这是一条单行注释 public int i; 1.2多行注释 /* 这是 * ...
最新文章
- 如何把项目部署到云服务器上,如何把项目部署到云主机
- 2018 年 Android 应用程序的发展趋势
- XSS攻击及解决方案
- 子域收集-fierce
- AutoCAD实用功能之查看xdata扩展属性
- 电子万年历——沐雨先生
- 2019年360笔试
- 原来BIOS放电是要在断电的情况下进行的
- 阿里云基础认证(ACA - Alibaba Cloud Certification Associate)
- VR产生眩晕感原因之一——景深
- Vue响应式原理(defineProperty)
- 小额贷款公司取金融牌照难实现 --》小额贷款公司可以改制成为村镇银行
- 【Python】-setting模块的安装
- 我身边的一些数据库事故 (r5笔记第52天)
- 2019辽宁公务员考试行测常识大全:公务员常识40000问(五十三)
- DirectInput编程基础-游戏手柄编程
- Java基础错题集(一)
- 联想E460重装系统
- 蒙特卡洛算法简介及其python实现
- 微PE工具箱v2.1官方测试版
热门文章
- lowerBound与upperBound
- Running Maven project on Tomcat from Eclipse
- no nlsxbe in java.library.path
- [Android Studio] Android Studio如何查看branch列表及切换branch(转载)
- 关于apache虚拟主机htttpd的配置实例 (更新中)
- [九度][何海涛] 栈的压入压出
- 画风清奇!看看大佬怎么玩Python
- java tcp发消息给硬件_java – TCP客户端/服务器通信只发送第一条消息?
- 基于session认证
- 置springboot自带tomcat的最大连接数和最大并发数