2021/9/9

最新推荐文章于 2024-08-07 22:13:00 发布

HXX_

最新推荐文章于 2024-08-07 22:13:00 发布

阅读量47

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_43579224/article/details/120210475

版权

CSS

css的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，易被搜索引擎收录

导入方式

行内样式

<h1 style="color: darkcyan">加油</h1>

内部样式

<style>
  h1{
    color: antiquewhite;
     }
</style>

外部样式

**1.连接式： ** 用link与css连接

<link rel="stylesheet" href="css/style.css">

2.导入式： **@import url(css/style.css);**先展示原来的页面，再慢慢渲染

3.区别:

link属于XHTML标签，而@import是CSS提供的;
link标签除了可以加载CSS外，还可以做很多其它的事情，@import就只能加载CSS了。
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

4.优先级

当@import与内联样式<style></style>一起时，内联样式>导入样式
遵循就近原则

选择器

标签选择器

/标签选择器，会选择到页面上所有的这个标签/

标签{}

<style>

  h1 {
    color: aqua;
  }

<h1>哈哈</h1>
<h1>啦咯</h1>
<p>加油</p>

类选择器

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

好处：可以多个标签归类，是同一个class，可以复用

.class名称{

}

 <h1 class="one">one</h1>

<style>
	one是class名称
    .one{
        color: #00e1ff;
    }
    .two{
        color: #f9d7fa;
    }
</style>
<body>
    <h1 class="one">one</h1>
    <h1 class="two">one</h1>
    <h1 class="one">one</h1>
</body>

id选择器

id必须保证全局唯一

不遵循就近原则，固定
id选择器>class选择器>标签选择器

 # id名称{}

#ye{
  color: #00e1ff;
}

<h1 id="ye">one</h1>

HXX_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021/9/9

CSScss的优势：内容和表现分离网页结构表现统一，可以实现复用样式十分丰富建议使用独立于html的css文件利用SEO，易被搜索引擎收录导入方式行内样式<h1 style="color: darkcyan">加油</h1>内部样式<style> h1{ color: antiquewhite; }</style>外部样式**1.连接式： ** 用link与css连接<link rel="
复制链接

扫一扫