手摸手带你学CSS

HTML常用标签总结

前言

在大一的时候,上过网页设计的课程,当时感觉学的还不赖,但也确实挺长时间没碰了,很多东西都忘了,所以这段时间在B站上找了视频重新学了一遍。好记性不如烂笔头嘛,所以一边学一遍做了详细的笔记,以后有什么不记得的就可以拿出来复习复习。

基础选择器

CSS中的选择器可以将HTML中的标签选择出来,然后为其设置CSS样式。

标签选择器

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。优点就是能为某一类选择器设置统一的样式,缺点是不能为单个标签设置样式,只能设置所有的。

<head> ………… <style> /* 语法: 标签名 { 属性名: 属性值; ...... } */ p { width: 30px; height: 30px; background-color: aquamarine; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> </body>

类选择器

如果想要单独设置某一个或者某几个标签的样式,可以使用类选择器。只要为相应的HTML标签设置class属性,指定对应的类选择器,就可以为其设置样式,可以使用多类名,类名用空格隔开。

<head> ...... <style> /* 语法: .类名 { 属性名: 属性值; ...... } */ .box { width: 20px; } .red { background-color: red; } .green { background-color: green; } </style> </head> <body> <div>红色</div> <!--多类名的格式:--> <div>绿色</div> <div>红色</div> </body>

id选择器

id选择器可以为标有特定 id 的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中 id 选择器以 “#" 来定义。

<head> ...... <style> /* 语法: #id名 { 属性名: 属性值; ...... } */ #robod { background-color: bisque; color: rgb(43, 10, 75); } </style> </head> <body> <p>微信公众号:Robod</p> </body>

通配符选择器

通配符选择器用 “*” 定义,用于设置页面中所有标签的样式。它只需要定义不需要调用,标签会自动调用通配符选择器。

<head> ...... <style> /* 语法: * { 属性名: 属性值; ...... } */ * { color: blue; } </style> </head> <body> <p>0000</p> <div>1111</div> </body>

CSS字体属性

font-family:设置文字的字体,如果指定多个字体默认会使用第一个,当第一个字体没有安装时会使用第二个,以此类推。字体名不需要用引号引起来,但由多个单词组成的字体名需要用单引号引起来。

p { font-family:'Times New Roman', Times, serif; }

font-size:设置文字的大小,单位是 px (像素)。标题标签的文字大小需要单独设置,不然不起作用。

p { font-size: 100px; }

font-weight:设置文字的粗细。

font-style:设置文字的样式

还可以使用复合属性的方式将上述几种属性写在一起,不过要遵守一定的顺序,不能颠倒。

CSS文本属性

color:设置文本的颜色,有三种方式,第一种是预定义的颜色,第二种是十六进制,第三种是RGB值

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wssfzg.html