rel: 被连接的文档是一个样式表
例:1行内样式表:
<!DOCtype html> <html> <head> <title>行内</title> <meta charset="utf-8" /> </head> <body> <!-- 行内样式 --> <p style="color:red;">一闪一闪亮晶晶,满天都是小星星</p> </body> </html>
例2:内联样式表
<!DOCtype html> <html> <head> <title>内联样式表</title> <meta charset="utf-8" /> <!-- 内联样式表 --> <style type="text/css"> /*内联样式表*/ p { color: red; } </style> </head> <body> <p>一闪一闪亮晶晶,满天都是小星星</p> </body> </html>
例3:外联样式表
1.<!DOCtype html> <html> <head> <title>外联样式表</title> <meta charset="utf-8" /> <!-- 外联样式表 --> <link rel="stylesheet" type="text/css" href="3-wailian.css" /> </head> <body> <p>一闪一闪亮晶晶,满天都是小星星</p> </body> </html>
2.css文件
p { font-size:50px; }
四. css语法特点 1.格式: 选择器 {} 2.大括号中写样式 3.样式格式: html 属性名="属性值" 中间用空格隔开 css 属性名:属性值; 分号不能少 4.html注释: <!--这里写注释-->css注释 : /*这里写注释*/
五. 常用选择器 <1>标签选择器: 在html 中可以使用标签,来设置样式,给该文件中所有的同一个标签来设置样式 格式: 标签名 {} <2>class选择器:在html中使用标签的属性class设置一个值, 格式为: .类名 {} [注] 1.在同一个文件中class的值可以相同 2.class 属性值可以有多个,中间用空格隔开 3.设置的越近,优先级越高 <3>id选择器: 在html中使用id的属性设置一个值, #表示id 格式为: #id名 {} [注] id的值时唯一的,不能重复 <4>组合选择器: id class 标签. 层级选择器组合起来使用后 格式: 各种选择器,中间使用逗号隔开 {} <5>层级选择器: 有层级关系,可以从父级找到子级或者子子级,中间使用空格隔开 <6>伪类选择器: (link,active,hover,visited focus first-child last-child) first-child: 从父级标签中找到第一级 last-child: 从父级找到最后一级 link: 表示超链接默认的颜色 hover: 表示鼠标放上去但是没有点击时颜色 active: 表示鼠标点击时(处于活跃的状态)显示的颜色 visited: 表示访问过超链接的颜色 可靠顺序为: link---visited----hover----active focus: 表示焦点 通常结合input框来使用 鼠标选中并且离开后的状态就是focus 总结: 标签名:link(active,hover,visited focus first-child last-child) {} <7>属性选择器: 一般只用于input框 格式为:input[type="text"] {background-color: red;}
<8>* 通用选择器:给整个页面的一个样式 格式: * {}
例1标签选择器
<!DOCtype html> <html> <head> <title>标签选择器</title> <meta charset="utf-8" /> <style type="text/css"> div { font-size: 50px; color: red; } p { background-color: yellow; } </style> </head> <body> <p>一闪一闪亮晶晶,满天都是小星星</p> <div>充电五分钟,通话两小时</div> </body> </html>
例2 class选择器
<!DOCtype html> <html> <head> <title>class选择器</title> <meta charset="utf-8" /> <style type="text/css"> /*class选择器*/ .lhy { color: green; font-size: 100px; } .hr { color: pink; background-color: green; } </style> </head> <body> <div class="lhy hr">最穷不过要饭,不死终会出头</div> <p class="lhy">好运不会眷顾傻瓜</p> </body> </html>
例3 id选择器
<!DOCtype html> <html> <head> <title>id选择器</title> <meta charset="utf-8" /> <style type="text/css"> /*id选择器*/ #bb { background-color: green; color: yellow; } </style> </head> <body> <p id="bb">其实我是喜欢王宝强的,我觉得老宋长得特别寒碜</p> </body> </html>
例4;组合选择器
<!DOCtype html> <html> <head> <title>组合选择器</title> <meta charset="utf-8" /> <style type="text/css"> /*组合选择器*/ .fty, #gq, span, b { color: red; font-size: 30px; } </style> </head> <body> <div class="fty">安踏不走寻常路,特步非一般的感觉</div> <p id="gq">曾经沧海难为水,除却巫山不是云</p> <span>这一刻照亮你的帅</span> <b>我想静静</b> </body> </html>
例5:层级选择器
<!DOCtype html> <html> <head> <title>层级选择器</title> <meta charset="utf-8" /> <style type="text/css"> /*层级选择器*/ .yeye .father #sunzi { font-size: 30px; color: red; } .yeye .father span { font-size: 20px; color: blue; } .yeye #chongsun { color: gray; } .yeye .father #sunzi #chongsun { color: yellow; } </style> </head> <body> <div class="yeye" > <div class="father"> <div id="sunzi"> 这是孙子 <div id="chongsun"> 这是重孙子 </div> </div> <span>这是孙女</span> </div> </div> </body> </html>
例6:伪类选择器
<a<!DOCtype html> <html> <head> <title>伪类选择器</title> <meta charset="utf-8" /> <style type="text/css"> /*伪类选择器*/ div .ul li:first-child { color: red; font-size: 30px; } div .ul li:last-child { color: blue; font-size: 60px; } .bq a:first-child { color: green; font-size: 40px; } .bq a:last-child { color: green; font-size: 40px; } </style> </head> <body> <div> <ul class="ul"> <li>第一级</li> <li>第二级</li> <li>第三级</li> <li>第四级</li> <li>第五级</li> </ul> </div> <div class="bq"> <a>标签1</a> <a>标签2</a> <a>标签3</a> <a>标签4</a> <span>这是一个捣乱的标签</span> </div> </body> </html>
例7:属性选择器
<a<!DOCtype html> <html> <head> <title>属性选择器</title> <meta charset="utf-8" /> <style type="text/css"> /*属性选择器*/ * { background-color: blue; } input[type="text"] { background-color: red; } input[name="password"] { background-color: green; } </style> </head> <body> 用户名:<input type="text" name="username" /><br /> 密码: <input type="password" name="password" /> </body> </body> </html>
六. 优先级 继承性: 主要针对于文本属性,设置样式:字体的大小,颜色 单个选择器优先级: 行内样式 > id选择器 > class选择器 > 标签选择器 内联和外联优先级: 外联的优先级 大于内联的优先级
多个选择器优先级 :设置的越精确,优先级越高
例:继承性
<a<!DOCtype html> <html> <head> <title>继承关系</title> <meta charset="utf-8" /> <style type="text/css"> .yeye { color: red; font-size: 30px; } </style> </head> <body> <div class="yeye"> 这是爷爷说的话 <div class="father"> 这是爸爸说的话 <div id="sunzi"> 这是孙子 </div> </div> </div> </body> </body> </html>
例:优先级
<a<!DOCtype html> <html> <head> <title>优先级</title> <meta charset="utf-8" /> <style type="text/css"> .yeye { color: red; } #nainai { color: green; } div { color: blue; } p { font-size: 30px; } .yy #ss { color: red; font-size: 100px; } .yy .ff #ss { color: blue; font-size: 50px; } </style> <link rel="stylesheet" type="text/css" href="3-wailian.css" /> </head> <body> <div class="yeye" id="nainai" style="font-size:30px;"> 这是爷爷说的话 </div> . <p>我们的一根鸡毛都不能少</p> <div class="yy"> 这是爷爷辈 <div class="ff"> 这是父辈 <div id="ss"> 这是孙子辈 </div> </div> </div> </body> </html>
七. 行内元素 块元素 行内块元素 块元素: div p h1-h6 ul ol hr table其他的标签都是行内元素
行内块元素:1.css中,只有块元素才有宽和高,才能设置相应的样式
2.如果不设置块元素的宽度,其宽度会占用整行,如果不设置高度,内容会占据相应的高,如果不设置内容,整个块元素就没有意义3.行内块标签,有两个特殊的标签img input 因为他们都可以设置宽和高,但是在写其他内容又不需要换行
八. 常用属性
1.宽高 width/height: min-height/max-height/max-width/min-width(了解) 2.单位 px: em: rem: %: 3.字体 font-size/color/font-weight/font-family/font-style 4.文本属性 text-indent: text-align: text-overflow: text-decoration: text-shadow: line-height:vertical-align:
最后,如果您是初学者碰巧看到这篇博客,有什么问题可以评论留言,大家一起交流一下,如果您是大牛,有什么问题也请指出来,赠人玫瑰,手留余香嘛!
