css 语法由三部分构成:选择器 、 属性 、 值
selector { property : value }
css中注释 : /* */
使用css样式:
1.内联方式(行内样式)
就是在HTML的标签中使用style属性来设置css样式
格式: <html 标签 style=" 属性:值 ;属性 :值 ">被修饰的内容</html标签>
<p style="border: 5px solid red ; padding: 5px ">目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>
<padding 的作用就是距离中心文字的边框的距离>
特点:仅作用于本标签
2.内部方式(内嵌样式)
就是在head标签中使用 <style type="text/css">......</style>标签来设置css样式
格式:<style type="text/css ">
........css样式代码
</style>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cssde 练习 </title> <style type="text/css"> /*css样式的注释*/ p{ border: solid 2px red ; } </style> </head> <body> <!-- <p style="border: 3px solid red ; padding: 15px ">目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p> --> <p>美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p> <p>美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p> <p>美媒:拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p> </body> </html>
特点:作用于整个界面
3.外部导入方式(外部链入)
就是在head标签中使用<link>标签导入一个css文件,在作用于本页面,实现css样式设置
<link rel="stylesheet" type="text/css" href="./css/css.css">
href就是css样式的地方,在当前目录下的css文件夹的css.css文件中
特点:没啥特点
三者的优先级:当样式发生冲突时,采用就近原则