CSS入门
来源：互联网 发布：java技术总监岗位职责 编辑：程序博客网 时间：2024/06/08 17:10
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></head><style type="text/css"> a{ font-size:34px; color:#393}</style><body><a href="">超链接1<br/></a><a href="">超链接2<br/></a><a href="">超链接3<br/></a><a href="">超链接4<br/></a></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"/>2 CSS语法
a{ font-size:24px; color:#F00; }选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景…..
CSS值（value）：添加样式的具体值。12px , 红色，背景图片….
2.1 选择器
<!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><!--css中的选择器:1.标签选择器:选中同名的所有标签 语法:标签名称{ css代码}2.类选择器:选中所有同名的类的标签使用规则:标签内部必须有class属性使用语法:.类名{css代码}注意:当一个标签同时被标签选择器和类选择器同时选中的时候,类选择器起作用,类选择器相对于标签选择器的优先级更高3.id选择器使用规则:标签内必须有id属性,选中对应的id的值的标签进行样式的设定语法:#id值{css样式}注意:1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签4.并集选择器当多个选择器中的css代码相同的时候,我们可以使用并集选择器,对这些css代码进行抽取5.交集选择器:作用是选中某一个标签中的子标签(外标签 内标签)语法: 外部选择器 内部标签选择器{css代码}--><!--/*标签选择器*/--><style type="text/css">/*类选择器,给div1和div2设置样式*/.c1{ font-size:14px; color:#C90} /*使用id选择器给div1设置样式*//#i1{ font-size:14px; color:#C90}/*将div4和div5的c2样式设置为和c1完全相同*/.c2{ font-size:14px; color:#C90}/*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/ .c1,.c2{ font-size:14px; color:#C90}/*给div中的span标签设置一个样式,交集选择*/div span{ font-size:14px; color:#C90} } </style></head><body><div class="c1" id="i1">我是div1</div><br/><div class="c2">我是div2</div><br/><div>我是div3</div><br/><div class="c2">我是div4</div><br/><div class="c2">我是div5</div><br/><div><span>我是div里面的span标签</span></div></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: 没有访问过的状态 hover: 鼠标经过的状态 active:鼠标激活（按下但没有松开）的状态 visited: 已经被访问过的状态（鼠标点下且松开） 设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。这里的意思就是如果不按这个顺序的话，你所设置的属性只能显示一次。--><style type="text/css"> a:link{ font-size:18px; color:#609; } a:visited{ font-size:18px; color:#003; } a:hover{ font-size:18px; color:#3F0; text-decoration:line-through; } a:active{ font-size:18px; color:#F03; }</style></head><body><a href="24-第二十四天作业/2.css使用方式.html">伪类选择器2</a></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>div{ /*设置字符间距*/ letter-spacing:28px; /*设置文本的位置*/ text-align:center /*给文本设置上划/下划/中划线*/ text-decoration:underline; /*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/ word-spacing:14px; }</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> css字体</title><style>div{ /*设置字体*/ /*font-family:"黑体";*/ /*设置字体大小*/ /*font-size:12px;*/ /*设置字体样式*/ /*font-style:italic;*/ /*设置字体的粗细*/ /*font-weight:bold;*/ /*字体设置的简写属性,一定要注意属性的顺序,注意这里面要用空格隔开，不是逗号。*/ font:italic bold 12px "黑体"； }</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>css背景</title><style type="text/css"> body{ /*给标签设置背景颜色*/ background-color:#006; /*将背景设置为图片*/ background-image:url(%E5%90%B4%E4%BA%A6%E5%87%A1.JPEG); /*设置背景图片的重复规则 repeat:默认显示的重复方式,x,y方向都重复 repeat-x:设置图片仅在x方向上重复 repeat-y:设置图片仅在y轴方向上进行重复 no-repeat:图片不重复 图片位置有：top,center,bottom. 背景位置：left,center,right. */ background-repeat:no-repeat; /*设置图片的位置*/ background-position:bottom center ; /*设置图片背景的简写样式*/ /*background:#006 url(../%E5%90%B4%E4%BA%A6%E5%87%A1.JPEG) 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>css列表</title><style type="text/css"> ul{ /*设置图片背景的简写样式*/ list-style-type:circle; /*设置列表符号的图这里的url路径比较长，是因为我自己设置的图片位置的原因片，*/ list-style-image:url(24%EF%BC%8D%E7%AC%AC%E4%BA%8C%E5%8D%81%E5%9B%9B%E5%A4%A9/05.%E7%B4%A0%E6%9D%90/start.jpg) /*列表样式的简写属性,这里的url路径比较长，是因为我自己设置的图片位置的原因*/ list-style:url(24%EF%BC%8D%E7%AC%AC%E4%BA%8C%E5%8D%81%E5%9B%9B%E5%A4%A9/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 align="center" height="300" width="400" border="2" ><tr><td>姓名</td><td>科目</td><td>成绩</td></tr><tr><td>呼呼</td><td>数学</td><td>89</td></tr><tr><td>乐乐</td><td>数学</td><td>98</td></tr><tr><td>欢欢</td><td>数学</td><td>67</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>css边框</title><style type="text/css">div{ height:300px; width:400px; /*边框样式(注意： 边框只有加了border-style才会显示出来颜色，也就是说要先写它的样式属性) solid: 单话线 dashed:虚线 dotted: 点 double: 双实线*/ /*border-top-style:dashed; border-left-style:dotted; border-right-style:double; border-bottom-style:solid;*/ /*边框颜色*/ /*简写属性 1) 默认设置方向属性： 上 右 下 左 2）如果当前方向没有设置颜色，那么取对面的颜色*/ /*border-top-color:#666; border-bottom-color:#633; border-left-color:#6FC; border-right-color:#F00;*/ /*边框宽度*/ /*border-top-width:2px; border-left-width:3px; border-right-width:12px; border-bottom-width:5px;*/ /*所有边框属性的简写属性,必须记住的，并要按这个顺序border:border-width border-style border-color*/ border:3px dashed #0F3; }</style></head><body><div>我是div标签</div></body></html>3 盒子模型
<!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><!-- 可以把html页面上每个标签看做是一个盒子。 盒子相关的属性： 宽度和高度（width和height）： 决定这个盒子的容量 内边距（padding）： 盒子边框与内容的距离 边框（border）： 盒子的厚度 外边距（margin）： 盒子与盒子之间的距离--><style>div{ /*1.将盒子的宽高变为之前的两倍 2.将盒子厚度变为原来的两倍 3.盒子里面的内容距顶部内10px 4.盒子里面的内容距离左内边10px 5.下面的盒子距离上面的盒子10px(两种方式实现)*/ width:100px; height:100px; border:10px dashed #393; }#d1{ width:100px; height:100px; padding-top:10px; padding-left:10px; margin-top:30px; }</style></head><body><div>我是一个盒子</div><div id="d1">我是老大</div></body></html>4.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>css定位</title><!--相对定位：relative（相对自己之前的位置） 绝对定位：abosolute（相对父标签的位置） 固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)--><style type="text/css">div{ height:200px; width:300px; border:10px solid #F33; }#d1{ position:relative; top:200px; left:200px; /*position:absolute; top:300px; left:400px;*/ /*position:fixed; top:300px; left:400px;*/ }</style></head><body><div>div1</div><div id="d1">div2</div><br /><b<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 /><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 />r /><br /><br /><br /><br /><br /><br /><br /></body></html>阅读全文
0 0
- CSS入门
- css入门
- CSS入门
- CSS入门
- CSS 入门
- CSS入门
- CSS入门
- CSS入门
- CSS入门
- css入门
- CSS入门
- css入门
- CSS入门
- CSS 入门
- css 入门
- css入门
- CSS入门
- CSS 入门
- HTML 标签解释大全
- 学习Linux命令（51）
- 3.Longest Substring Without Repeating Characters-python
- Android强大的数据库开源框架LitePal
- Ceph新长支持稳定版本Luminous（12.x.x）新功能总结
- CSS入门
- toad 启动时长时间 checking feedback server
- java中的mvc三层结构究竟有什么关系
- Linux 文件名和路径的最大长度
- Nginx详细的安装教程（linux）
- andriod系统源码编译之1---制作U盘
- 关于浏览器进入Kibana，初始配置时无法create,显示unable to fetch mapping的问题
- 面向对象写拖拽事件
- struts2框架上传文件（参考）
