初识CSS css的引入方式 css中常用的选择器 css中常用的样式属性

110 阅读2分钟

一. CSS简介。

CSS:层叠式样式表。

作用:为标签元素添加各种样式(css属性),让网页美观。

二. CSS的引入方式。

1. 行间/行内引入
2. 内部引入,在head中,title标签下
3. 外部引入,单独创建 .css文件,在head中,title标签引入.引入关键字 link 三种方式可随机混搭使用!

1. css内部引入方式。

1.1 实现方式:在html文件的head标签中,添加上一对style标签,将样式写到style标签中即可。

1.2 优点:

1.2.1 不用来回调文件写代码。

1.2.2 因为html结构和css样式在同一个文件中,可以非常方便的查找以及写css样式。

1.3 缺点:

1.3.1 不能复用。

1.3.2 如果写大型网站,会出现html文件中css代码多余html结构代码。

1.4 使用场景。

网页比较小/课堂代码/测试。

<!--1.行间引入 不推荐使用,会造成代码过于冗杂!-->
        <div style="width:200px ; height: 100px; background-color:sandybrown ;">今天天气好好啊哈哈哈哈!</div>

2. css外部引入方式。

2.1 实现方式:

2.1.1 在工程的css文件夹中单独创建一个独立的css文件,在该css文件中添加css样式。(注意:不需要在css文件中添加style标签)

2.1.2 在html文件的head标签中,添加link标签,引入关联外部的css样式文件。

2.2 优点:

2.2.1 能够实现html规范中的html结构和css样式的分离。

2.2.2 方便复用。

2.3 缺点:

2.3.1 不方便查看结构和样式。

2.4 使用场景。

中大型网页。

<!--外部引入css文件-->
<link rel="stylesheet" type="text/css" href="css文件路径"/>

3. CSS内联式。

3.1 实现方式:在开始标签中,添加style属性,属性值直接给上css属性即可。

在head中设置如下代码

<!--内部引入 -->
        <style type="text/css">
            /*注释!!!*/
            p{
                width: 500px;
                height: 50px;
                background-color: deeppink; 
            }
            
            div{
                width: 600px;
                height: 200px;
                background-color: palegreen;
                text-align: center;
            }   
        </style>

2.css中常用的选择器

  • 选择器:就是帮我们精准的选中某一个或者某一些标签
  • 优先级: a. !important b. #id c. .class d. 标签名选择器

3.css中常用的样式属性

  • 注意:css层叠样式表,关键单词 style
  • 注意: .css文件是依赖于.html文件运行的.不能单独运行