CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
简单来说一句话,就是用来给HTML标签设置外观样式的,让我们的HTML页面更加的丰富多彩.
<div style="color:red;font-size:130px;">今天开始学习CSS样式结构</div>
内嵌式 在同一个页面的head标签的一对style标签内写样式 页面结构比较简单
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内嵌样式的写法</title> <style type="text/css"> div { color:cyan; font-size: 80px; } /* 内嵌样式的写法,是写在同一个页面中的head标签的style标签内 */ </style> </head> <body> <div>但行好事,莫问前程</div> </body>
外链式 就是将样式写在一个单独的css文件当中,然后使用link标签引入到对应的html文件当中, 当做大项目的时候,提倡结构和样式完分离。
在页面中单击右键--->检查--->可以看到对应的标签,在右侧可以看到对应的样式,可以通过控制台来检查对应的样式和排错.
5.选择器
要想给页面中的标签设置对应的样式,首先得先找到对应的标签,
在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。
直白的说,选择器就是用来获取标签的一种方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标签选择器</title> <style> div { font-size: 60px; color: blue; color: red; /* 当一个属性被设置了多次的时候,默认以最后一次为主 */ } </style> </head> <body> <div>但行好事,莫问前程</div> <p>中华人民共和国</p> <div>愿岁月静好,愿现世安稳</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标签选择器</title> <style> div { font-size: 60px; /* color:blue; color: red; */ /* 当一个属性被设置了多次的时候,默认以最后一次为主 */ } .box { color: blue; } .demo { color: red; } </style> </head> <body> <div class="box">但行好事,莫问前程</div> <p>中华人民共和国</p> <div class="demo">愿岁月静好,愿现世安稳</div> </body> </html>
类选择器的命名规范:
1.如果类名比较长或是有多个词的话,可以使用中划线
2.避免使用下划线,下划线留给js中的变量或是id名使用
多类名选择器
就是将多个类的样式同时作用于同一个标签上
id选择器
用法和类选择器是一样的,区别:
类选择器就相当于是人的名字,在一个页面中,可以有多个重复的
id选择器就相当于人的身份证号码,一个页面中不能出现相同的两个ID名
id多用于js当中来使用
*通配符选择器
*指的是通配符选择器,会将页面中所有的标签元素都选择中,效率比较低,用的不多。
在写一个页面的小案例的时候,或许会用到,常常是用来清除掉当前页面的所有的标签的默认内外间距。
1.font-size字体大小
font-size px em
2.font-family 字体样式
font-family:"宋体,仿宋,楷体,小篆,微软雅黑"
微软雅黑或"microsoft yahei"用的是最多的
3.font-weight 字体粗细
给文字内容设置粗细,代替b或strong
4.font-style 字体风格 正常还是倾斜
给文字设置字体风格,用来代替i或em
font字体是一个复合属性,是由font-style,font-weight,font-size,font-family组成的。
如果简写的话,有两个是必须的,font-size,font-family是必须要写的。
7.链接伪类
可以用于页面中设置一些特殊的效果
:link 未访问过的默认状态 只对a标签起作用
:visited 已经访问过的状态 只对a标签起作用
:hover 鼠标悬停在上面时的效果 对任何标签都起作用
:active 选定时的状态 对任何标签起作用
8.总结
css样式 是用来给页面中的标签设置样式的,让页面更加的丰富多彩
书写的位置: 行内 内嵌 外链
学会使用chrome浏览器的控制台进行查看html骨架或css样式
基本选择器
标签选择器
类选择器
多类名选择器
id选择器
通配符选择器
链接伪类选择器
:hover link visited active
字体样式设置
font-style 字体风格 正常还是倾斜 可以代替 i em