java学习【web基础-css入门】
来源：互联网 发布：杭州网络推广公司排名 编辑：程序博客网 时间：2024/06/04 18:55
1 CSS入门
1.1 引入
html：负责网页的结构
css： 负责网页的美观（样式）
1.2 体验
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> a{ font-size:18px; color:#F00;}</style></head><body><a href="">超链接</a><br /><a href="">超链接</a><br /><a href="">超链接</a><br /><a href="">超链接</a><br /></body></html>1.3 定义
CSS（Cascading Style Sheet 层叠样式表） 简称，样式。
主要负责网页的美观。
1.4 css的使用方式
1）行内样式
注意：1）使用标签的style属性进行css控制，css写在style属性值中2）弊端：只能控制一个标签的样式<a href="xxxx" style="font-size:19px;color:#090">超链接</a>2）内部样式
注意：1）使用style的标签进行css控制，css内容写在style标签体内2）一次控制多个标签的样式3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用<style type="text/css">a{ font-size:24px; color:#0F0; }</style>3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件
<!-- 导入外部css文件 href : 表示外部css文件的位置 rel: 表示关联的是样式表 --> <link href="01.css" rel="stylesheet"/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!-- <style type="text/css"> /*1.使用选择器选中你要设置样式的标签 2.给标签设置样式, 样式属性:样式值 */ a{ font-size:36px; color:#0F0} </style>--><!--将外部的css文件导入此html代码中--><link href="1.css" rel="stylesheet" /></head><!--css的使用方式:1.行内样式:使用标签内部的style属性给每一个标签设置样式缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更改起来比较麻烦2.内部样式:使用style标签,给style标签中写css的样式代码缺点:css代码和html代码混杂在了一起,管理起来比较麻烦3.外部样式(推荐):在html代码的外部,创建一个css文件,css文件中写独立的css代码,使用的时候,直接将css文件导入到html文件中即可<link href="1.css" rel="stylesheet" />href : 表示外部css文件的位置rel: 表示关联的是样式表--><body><a href="" >超链接</a><br /><a href="" >超链接</a><br /><a href="" >超链接</a><br /><a href="" >超链接</a><br /></body></html> a{ font-size:36px; color:#0F0}2 CSS语法
a{ font-size:24px; color:#F00;}选择器（selector）：使用选择器来选择需要添加样式的标签。CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景.....CSS值（value）：添加样式的具体值。12px , 红色，背景图片....2.1 选择器
标签选择器
作用： 选择同名的标签div{ font-size:24px; color:#F00; }注意： 1）选择到所有同名的标签类选择器
作用： 选择同类的标签/*类选择器*/ .c1{ font-size:24px; color:#F00; }注意： 1）选择的标签必须有class的属性。同类的标签使用同名 2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！id选择器
作用： 选择一个标签#d1{ font-size:24px; color:#0F0; }注意： 1）选择的标签必须有id属性。 2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值") 3）id选择器的优先级最高！并集选择器
/*并集选择器*/ .c1,#d1{ font-size:24px; color:#0F0; } 作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。交集选择器
/*交集选择器 div里面的span标签 */ .c1 span{ font-size:24px; color:#0F0; } 作用： 选择某个选择器中的子标签。通用选择器
/*通用选择器*/*{ font-size:24px; color:#0F0;} 作用； 选择所有的标签<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/*标签选择器*/div{ font-size:14px; color:#F00;}/*类选择器,给div1和div2设置样式*//*.c1{ font-size:16px; color:#00F;}*//*使用id选择器给div1设置样式*/#d1{ font-size:24px; color:#600;}/*将div4和div5的c2样式设置为和c1完全相同*//*.c2{ font-size:16px; color:#00F; }*//*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/ .c1,.c2{ font-size:16px; color:#00F; }/*给div中的span标签设置一个样式,交集选择器*/div span{ font-size:36px; color:#006; }</style></head><body><div id="d1">div1</div><br /><div class="c1">div2</div><br /><div class="c1">div3</div><br /><div class="c2">div4</div><br /><div class="c2">div5</div><br /><div><span>div中的span标签</span></div><br /><span>独立的span标签</span></body></html>伪类选择器
作用：控制标签在不同状态下的样式。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。--><style type="text/css"> a:link{ /*在a标签的link状态下需要展示的样式*/ font-size:24px; color:#00F; } a:visited{ font-size:24px; color:#900; } a:hover{ font-size:24px; color:#F00; text-decoration:line-through; } a:active{ font-size:24px; color:#9F0; }</style></head><body><a href="3.css语法及选择器.html">伪类选择器</a></body></html>标签有四种状态：
link: 没有访问过的状态hover: 鼠标经过的状态active:鼠标激活（按下但没有松开）的状态visited: 已经被访问过的状态（鼠标点下且松开）<style type="text/css"> /*使用link伪类控制--没有访问过的状态*/ a:link{ font-size:24px; color:#F00; } /*使用visited伪类控制--已经被访问过的状态（鼠标点下且松开）*/ a:visited{ font-size:24px; color:#CCC; text-decoration:none; } /*使用hover伪类控制-鼠标经过的状态*/ a:hover{ font-size:24px; color:#00F; text-decoration:none; } /*使用active伪类控制--鼠标激活（按下但没有松开）的状态*/ a:active{ font-size:24px; color:#0F0; text-decoration:underline; } /*注意： 1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有 效的。 正确顺序： link visited hover active */ </style> </head> <body> <a href="01.css入门.html">超链接</a> </body> </html>案例：给表格每一行鼠标经过加上背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/*使用类选择器选中下面的三行*/.c:hover{ background-color:#036; }</style></head><body><table border="1" align="center" width="400px" height="300px"><tr><td>姓名</td><td>班级</td><td>成绩</td></tr><tr class="c"><td>刘德华</td><td>java</td><td>60</td></tr><tr class="c"><td>张学友</td><td>java</td><td>70</td></tr><tr class="c"><td>郭富城</td><td>java</td><td>80</td></tr></table></body></html>2.2 常用的CSS属性和值
CSS文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ /*设置字符间距*/ letter-spacing:4px; /*设置文本的位置*/ text-align:center; /*给文本设置上划/下划/中划线*/ text-decoration:underline; /*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/ word-spacing:10px; }</style></head><body><div>中国 共产党 万岁</div></body></html>CSS字体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> div{ /*设置字体*/ /*font-family:"黑体";*/ /*设置字体大小*/ /*font-size:36px;*/ /*设置字体样式*/ /*font-style:italic;*/ /*设置字体的粗细*/ /*font-weight:bold;*/ /*字体设置的简写属性,一定要注意属性的顺序*/ font:italic bold 36px "黑体"; }</style></head><body><div>中国共产党万岁</div></body></html>CSS背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> body{ /*给标签设置背景颜色*/ /*background-color:#006;*/ /*将背景设置为图片*/ /*background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);*/ /*设置背景图片的重复规则 repeat:默认显示的重复方式,x,y方向都重复 repeat-x:设置图片仅在x方向上重复 repeat-y:设置图片仅在y轴方向上进行重复 no-repeat:图片不重复 */ /*background-repeat:no-repeat;*/ /*设置图片的位置*/ /*background-position:top right ;*/ /*设置图片背景的简写样式*/ background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right; }</style></head><body></body></html>CSS列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> ul{ /*设置列表选项前面的样式*/ /*list-style-type:circle;*/ /*将图片设置为列表选项的一个标记*/ /*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*/ /*列表样式的简写属性*/ list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg); }</style></head><body><ul><li>章子怡</li><li>刘亦菲</li><li>刘诗诗</li></ul></body></html>CSS表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> table{ /*合并表格的边框*/ border-collapse:collapse;}</style></head><body><table border="1" align="center" width="400px" height="300px"><tr><td>姓名</td><td>班级</td><td>成绩</td></tr><tr class="c"><td>刘德华</td><td>java</td><td>60</td></tr><tr class="c"><td>张学友</td><td>java</td><td>70</td></tr><tr class="c"><td>郭富城</td><td>java</td><td>80</td></tr></table></body></html>CSS边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ width:300px; height:200px; /*必须首先设置边框的样式之后,边框的颜色才可以显示*/ /*border-color:#F00;*/ /*给四个边框非别设置不同的颜色*/ /* border-top-color:#0F0; border-bottom-color:#063; border-left-color:#9C0; border-right-color:#F00;*/ /*设置边框的样式*/ /*border-style:solid;*/ /*实线:solid*/ /*border-left-style:solid;*/ /*点划线:dotted*/ /*border-top-style:dotted;*/ /*双实线:double*/ /*border-right-style:double;*/ /*虚线:dashed*/ /*border-bottom-style:dashed;*/ /*设置边框的宽度*/ /*border-width:5px;*/ /*border-left-width:1px; border-top-width:3px; border-right-width:6px; border-bottom-width:9px;*/ /*使用简写属性,设置边框样式:booder:border-width border-style border-color*/ /*这个简写属性必须牢记*/ border:2px solid #F00; }</style></head><body><div>div</div></body></html>3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。
通过需求讲解盒子模型：1.将盒子的宽高变为之前的两倍2.将盒子厚度变为原来的两倍3.盒子里面的内容距顶部内10px4.盒子里面的内容距离左内边10px5.下面的盒子距离上面的盒子10px(两种方式实现)盒子相关的属性： 宽度和高度（width和height）： 决定这个盒子的容量 内边距（padding）： 盒子边框与内容的距离 边框（border）： 盒子的厚度 外边距（margin）： 盒子与盒子之间的距离<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ width:100px; height:100px; border:6px solid #900;}#d1{ width:200px; height:200px; padding-top:10px; padding-left:10px; margin-bottom:10px;}</style></head><body><div id="d1">div1</div><div>div2</div></body></html>4 CSS定位（画图解释） 
相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{ width:100px; height:100px; border:3px solid #F00;}#d2{ /*相对定位,相对于自己之前的位置*/ /* position:relative; top:20px; left:20px;*/ /*绝对定位:相对于自己的父标签而言的*/ /* position:absolute; top:20px; left:20px;*/ /*固定定位:相对于浏览器而言*/ position:fixed; left:500px; top:300px; }</style></head><body><div>div1</div><div id="d2">div2</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body></html>阅读全文
0 0
- java学习【web基础-css入门】
- java学习【web基础-html入门】
- java学习【web基础-Javascript入门】
- java学习【web基础-jQuery入门】
- java学习【web基础-JSP入门】
- 【Web】CSS基础学习
- web前端基础入门学习第三天css
- Web基础之CSS入门
- Java Web基础入门
- WEB入门三CSS样式表基础
- Java web学习入门
- Java学习基础入门
- java基础入门学习
- 从零开始，学习web前端之css基础
- 小贝学习CSS—入门基础
- JAVA WEB从入门到精通day02 DIV+CSS的学习
- Java Web入门学习总结
- web学习—css样式表—css基础语法
- AM3354增加DS18B20
- maven向本地仓库导入第三方jar包
- R语言与Python细节上的混淆
- ASP.NET sqlserver 数据转为横向显示
- UVa11988
- java学习【web基础-css入门】
- JavaScript判断客户端是否是iOS或者Android手机移动端
- Rxjava +EventBus 数据库的异步操作和界面的刷新
- Java开发中的23种设计模式详解
- [奇技淫巧] Android 4.4 5.0 6.0 另一种思路的沉浸式状态栏
- Linux的Yum问题
- HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
- Oracle APEX 报错List of Values not supported for this type
- jekyll 部署
