大家好,又见面了,我是你们的朋友全栈君。
摘要
- CSS又名层叠样式表,它的作用就是给HTML网页进一步装饰,前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构,后面学习的表form表单展现的形式是很low的,需要进一步对齐修饰设置,让它变得更高大上起来,这就离不开CSS的知识。
- CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
- 语法结构:选择器 {属性: 属性值;属性: 属性值}
- 注释形式:/*这是注释内容*/
/*多行注释内容1
多行注释内容2
*/ - 三种设置方法:
-
- head里面style中写css:<style>p {color: red}</style>
- head里面link引入css文件:<link rel=”stylesheet” href=”my_scc_02.css”>
- 在标签内直接指定style:<p style=”color: red”>hello world!</p>
-
我们在设置不同种类标签内容的样式的时候,需要知道我们修改的标签的位置,接下来看看如何精确定位设置样式的位置,才能设置其样式。
标签通常同的属性有:id和class类
- 标签选择器:根据标签种类来设置该类标签样式
- id选择器:每个标签都可以设置一个id在唯一标识它,所以我们可以通过这个id来定位到该标签位置,从而进行修改样式操作,id前面注意要加上#
- 类选择器:在标签里面设置class=”c1″,c1是一个类的设置样式,在style里定义的时候前面需要加点(.c1 {color:red})
- 通用选择器:类似这种* {color: blue},*代表所有标签,意思就是所有都全部设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习测试</title> <style> p { color: gold} .c1 { color: mediumturquoise} #p1 { color: blue} * { color: red} </style> </head> <body> <p>我要记住你的样子</p> <div>像鱼记住水的拥抱</div> <span>像云在天空中停靠</span> <h3 class="c1">夜晚的来到</h3> <p id="p1">也不会忘了阳光的温暖</p>
</body>
(涉及查找优先级的问题,在后面会谈及。)
03.组合选择器(span套span,不符合html5规则)
- 后代选择器==>div span:div里面所有的span
<div> 01我要忘了你的样子 <br> <span> 02像鱼忘了海的味道 <br> <span> 03放下所有梦和烦恼 </span> </span> </div>
- 儿子选择器==>div>span:div里面儿子一层(第一层)所有的span
<style> div>span { color: deeppink} </style> <div>主div <div>主div的儿子1 <span>主div的孙子1</span> </div> <p>主div的儿子2 <span>主div的孙子2</span> </p> </div>
- 毗邻选择器==>div+span:div下面挨着的span
<style> div+span { color: deeppink} </style> <div>主div <p>主div的儿子2 <span>主div的孙子2</span> </p> </div> <span>div下面的第一个span</span> <span>div下面的第二个span</span>
- 弟弟选择器==>div~span:与div同一级且下面所有的标签
<style> div~span { color: deeppink} </style> <div>主div <p>主div的儿子2 <span>主div的孙子2</span> </p> </div> <span>div下面的第一个span</span> <span>div下面的第二个span</span>
- 在标签内自定义一个属性,用于找到该标签的作用。
<style> [xxx] { color: deeppink} </style> <p xxx>自定义属性xxx</p> <p xxx="1">自定义属性+值1</p> <p xxx="2">自定义属性+值2</p> <p id="xxx">我是打酱油的!</p>
<style> [xxx='1'] { color: deeppink} </style> <p xxx>自定义属性xxx</p> <p xxx="1">自定义属性+值1</p> <p xxx="2">自定义属性+值2</p> <p id="xxx">我是打酱油的!</p>
<style> [xxx='2'] { color: deeppink} </style> <span xxx="2">我是span,我的属性里有xxx</span> <p xxx>自定义属性xxx</p> <p xxx="1">自定义属性+值1</p> <p xxx="2">自定义属性+值2</p> <p id="xxx">我是打酱油的!</p>
- 分组:
<style> div,p,span { color: red} </style> <div>我是div</div> <p>我是一个p</p> <span>我是span</span>
- 嵌套:
<style> div p,span { color: red} </style> <div>我是div <p>我是div里面的一个p</p> <span>我是div里面的span</span> </div> <p>我是一个p</p> <span>我是span</span>
-
div p嵌套关系,然后div和span是组合关系,所以:
- a标签的四种状态:
<style> a { text-decoration: none} /*去掉下划线*/ a:link { color: green} /*链接什么都不干的时候颜色*/ a:hover { color: red} /*鼠标放在链接上面不做任何动作时候变的颜色*/ a:active { color: blue} /*鼠标点击链接时候,链接的颜色*/ a:visited { color: gray} /*当这个链接已经点击过,将变成的颜色*/ </style> <p><a href="#我是下面" id="我是上面">点我跳到下面</a></p> <p><a href="http://www.t66y.com" target="_blank">点我开启新的人生篇章(爬梯吧)</a></p> <p><a href="http://www.baidu.com" target="_blank">百度一下</a></p> <p><a href="#我是上面" id="我是下面">点我跳到上面</a></p>
- 获取焦点:让输入框在选中时候,背景颜色变成自定义颜色
<style> input:focus { background-color: yellow} </style> <form action=""> <label for="a1">用户: <input type="text" id="a1" name="username"></label> <label for="a2">用户: <input type="password" id="a2" name="password"></label> <input type="submit"> </form>
- 伪元素选择器:将某一标签的第一个,开头、结尾处设置样式。
- first-letter
<style> p:first-letter { color: red; font-size: 24px} </style> <p>我闻西方大士,</p> <p>为人了却凡心。</p> <p>秋来明月照蓬门,</p> <p>香满禅房幽径。</p> <p>屈指灵山会后,</p> <p>居然紫竹成林。</p> <p>童男童女拜观音,</p> <p>仆仆何嫌荣顿?</p>
-
before:
<style> p:before { content: '△'; color: red; font-size: 24px} </style> <p>万物由道而生,循着道成长,而后又回归于道。</p> <p>人可以毁灭,但不可以屈服。</p> <p>你要克服的是你的虚荣心,是你的炫耀 欲,你要对付的是时时刻刻想出风头的小聪明。</p>
-
after:
<style> p:after { content: '☆'; color: red; font-size: 24px} </style> <p>包租婆,怎么就没有水了呢</p> <p>维护世界和平就靠你了,我这里有本秘籍,见与你有缘,就十块钱卖给你了.</p>
- 相同选择器,不同的引入方式:就近原则(从上往下生效),看哪个style里标签更近。
- 不同选择器,不同引入方式:行内样式>id选择器>类选择器>标签选择器
- 块儿级标签的宽度和长度:
<style> div { width: 800px; height: 100px;background-color: mediumspringgreen} </style> <div>樊登读书,改变你我</div>
- 字体相关设置(大小、自重、颜色):
<style> p { font-size: 24px; font-weight: lighter; color: #FF6700; /*color: rgb(0,0,255);*/ /*color: rgba(0,0,255,0.2)} 最后的0.2是透明度(0-1之间)*/ </style> <p>面朝大海,春暖花开</p>
-
文本属性:(通常给a标签用)
<style> p { text-align: center; text-decoration: line-through} </style> <p>浪花一朵朵</p> <p>桃花朵朵开</p>
- 去掉跳转文字的下划线:
<style> a { text-decoration: none} </style> <a href="http://www.baidu.com">百度一下</a> <a href="http://www.google.com">谷歌一下</a>
- 背景属性:
<style> .c1 { height: 200px; background: url("20190529[21-04].png") blue no-repeat center; } .c2 { height: 200px;background-color: tomato} .c3 { height: 200px;background-color: yellow} .c4 { height: 200px;background-color: greenyellow} </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div>
- 边框:
<style> div { border: 1px dashed red} </style> <div>我是一条鱼</div>
-
画圆:
<style> div { width: 400px; height: 400px; background-color: red; border: 2px dashed black; border-radius: 50%; } </style> <div></div>
10.display属性设置(设置不显示,不会继续占用位置)
- display:none
<style> [xxx] { display: none} /*设为none代表含xxx属性标签的内容都不显示,且不再占用原位置 </style> <div>开头1</div> <div xxx>看我显示没有1</div> <div xxx>看我显示没有1</div> <div>结尾2</div>
- display:inline 将块级标签变成行内标签
<style> div { height: 300px; width: 200px; background-color: aquamarine; display: inline; } </style> <div>天天</div> <div>年年</div>
- display:block 将行内标签变成块级标签
<style> span { display: block} </style> <span>美好的事情</span> <span>即将到来</span>
-
display :inline-block 让span标签具有独占一行且可以设置长宽
<style> span { width: 120px; height: 400px; background-color: bisque; border: 2px solid red; display: inline-block; } </style> <span>第一个span</span> <span>第二个span</span>
转载于:https://www.cnblogs.com/suguangti/p/10944050.html
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152676.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...