如何将HTML和CSS进行关联
1.内部关联<style>
2.外部关联 via <link rel = "stylesheet" href = "css资源的 URl" >
3.内联关联 via 元素的额style属性
认识选择器(selector)——重点
1.选择指定的元素:从整个文档(HTML整个文件)中进行选择,选择的是所有符合条件的元素,比如选择body元素 : body{....}
选择所有的div元素 : div{}
所有元素都支持的两个属性(attributes):
id (用来唯一表示一个元素的,建议不要重复)
class(用来描述元素分类,建议class元素可以多次进行使用)
当拥有了多个class元素时,使用空格进行分隔
< div id = "hello" class = "box container"></div>
意义:定义了一个分区(division),该分区的唯一标识符为"hello",该分区属于"box"和"container"分类
.large { width: 300px; height: 300px; } .medium { width: 200px; height: 200px; } .small { width: 100px; height: 100px; } .red { background-color: red; } .blue { background-color: red; } .yellow { background-color: yellow; } .square { } .circle { border-radius: 50%; }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>类选择器</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="large red square"></div> <div class="small red circle"></div> <div class="medium yellow square"></div> <div class="large blue circle"></div> <div class="large blue square"></div> </body> </html>
2.id选择器 :通过一个元素的id ,选择某一个元素
#id{...}
3.class类选择:通过一个指定的类别,选择某批元素
.class-name{...} box {...} . container {.....}
最基本的选择器:
元素选择器,id选择器,类选择器
body{} #some - id{} .some - class {...}
进阶的选择器
*{} ——通配符选择器—— 对所有的标签进行选择
组合选择器
//把元素选择器 和 类选择器进行了组合:
所有class中有hello的div元素——div.hello {..}
所有的class中既有hello,又有world的div元素——div.hello.world{...}
所有id是hello的div元素 —— div#hello{}
/* 选择所有的 body 元素,但 body 元素只有一个 */ body { background-color: blue; } div { width: 300px; height: 100px; } /* 所有 id 是 hello 的元素,听我号令 */ #hello { background-color: yellow; } /* 所有 id 是 world 的元素,听我号令 */ #world { background-color: green; }
一次选择多种元素
p,#hello.world{}—— 所有的p标签和所有的id为hello的标签和所有的class中带有world的标签,进行统一的调用。
子孙选择器:
body p {} ——所有的body元素的子孙(包括儿子的儿子)中的所有的p标签
#hello div.world {} ——先找到id为hello的元素,然后在其所有的子孙中,满足class中有world的div元素,统一调用。
直系孩子选择器
body > p {...} body 元素的孩子(只包括儿子)中的所有的p标签
<a></a> 关于a标签的几种状态 初始的状态 :link 鼠标的悬停在a标签上 :hover 鼠标按下不松开 :active 鼠标访问之后的状态 :visited
a:link{} a:hover{ } /* 通过上述的操作进行调用*/
:focus 焦点
某个元素获得焦点是(1.鼠标点击该元素;2.通过tab切换焦点),该选择器生效
<html lang="en"> <head> <meta charset="UTF-8"> <title>focus 焦点</title> <style> <style> input { height: 100px; } input:focus { height:500px; } </style> </style> </head> <body> <div> <input type="text"> </div> <div><input type="text"></div> <div><input type="text"></div> </body> </html>
样式应用覆盖的问题
1.越精细的选择器,它的优先级越高(会将不精确的覆盖)
div{ background-color: red ; } div.hello{ background-color:blue; } /* 此时下面较为精细的选择器会将上面的选择器覆盖 关于优先级: #id> .class > 元素 */
HTML <div class="hello"> </div>
2.同等优先级的情况下,写在下面的,会覆盖写在上面的
3.某些样式,自动带有继承功能,设置其父元素的样式,该元素的所有子孙,默认都按该样式处理;
css中常见的一些数值:
长宽:
绝对值 :**px;
相对值: *em; 相对于当前字体的两倍;
百分比: 100%; 一般是相对于其父元素(相对的基准点是可以设置)
关于颜色:
rgb (255,0,0)纯红色
rgb (0,255,0)纯绿色
rgb (0,0,0)纯黑色
rgb (255,255,255) 纯白色
agba 0-100 完全透明-完全不透明
————————————————————————————
rgba(255,138,252,0.3)
rgba(51, 170, 51, .4) /* 40%不透明的绿色 */ hsla(240, 100%, 50%, .05) /* 5% opaque blue */ /* font: font-family 是 font 内的一个属性标签,但是font范围太广,当你在font内定义字体的时候中文字体需要加上双引号,例如"宋体",并且font在W3C标准中不可以单独书写字体,必须填写完整其他属性,并且有顺序要求。 但是,国际上很少有单独使用font的例子,一般定义字体都用font-family,免去了font的很多麻烦。 在书写符合W3C标准的CSS代码时,常用的字体定义无非font-family和font-size,并不累赘,所以,还是建议你使用font-family定义字体! 如果不考虑W3C的问题,使用font也没有关系。 ———————————————— 版权声明:本文为CSDN博主「追梦少年的大牛计划」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/weixin_44943631/article/details/101772148 font-family: 字体 设置多个候选 字体中有空格,用逗号引起 font-size: 字体的大小(px,em) color: rgb、hsl; align:文本对齐 text-align:left\center\right decoration:文本装饰 text-decoration : 没有装饰、下划线、中划线 line: color style indent:文本缩进 text-indent:2em; */