CSS的基础使用方法有哪些

小编给大家分享一下CSS的基础使用方法有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联成立于2013年，先为船山等服务建站，船山等地企业，进行企业商务咨询服务。为船山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

第一部分：CSS的基本使用

（1）CSS是什么？

CSS全称Cascading Style Sheets，翻译：层叠（级联）样式表。
如果说HTML是网页的结构，那么CSS就是网页化妆师。

（2）CSS写在哪里？

CSS有三种写法：

1. 直接写在标签内

2. 写在style标签内

3. 使用外部.css文件

（对应CSS的三种写法，就有三种引入CSS的方式，见下：）

（3）CSS的三大引入方式：

1.直接写在标签内（直接在标签内设置）

    
    







我是段落标签

小知识点：

在设置属性color属性时，如下图操作，可以对颜色进行更加直观详细的选择：

2.写在style标签内（在< head > 标签内加入< style >标签进行设置）

    
    
        
        
    
我是段落标签

3.使用外部.css文件设置css文本，如1.css

第一种：用@import "1.css"将css文件引入；

第二种：通过< link >将css文件引入。

本处用的1.css文件内容：

    
    

    
    
    

    
    
我是段落标签2

小知识点：

@import导入式不推荐使用，因为存在缺陷：在整个网页装载完之后再装载.CSS文件，如果网页文件过大时，会导致先出现无样式的页面，闪烁以后再出现样式网页。
而推荐使用< link >，因为它是先装载.css文件，再装载网页

总结—上述三种引入方式的异同：

在实际开发中我们不使用行内样式！
使用最多的是外部样式。

一般写demo的时候使用内部样式————因为给别人发demo的时候，只发一个文件即可。  


无论是外部样式，内部样式还是行内样式，都会生效，它们共同为标签添加样式。

如果一个标签通过外部样式，内部样式设置了同一类样式（值不同），会产生覆盖效果————覆盖的原则：后写的样式覆盖先写的样式！

第二部分：选择器

（1）选择器权重：

现实生活中—谁的权利大，就听谁的，同理，选择器权重也是一样，谁的权重值高，应用谁的。这里的权重高低通过精确度评判，精确度越高，权重越大。

（2）选择器的用处：

用于准确的选中元素（就是HTML种讲的标签），并赋予样式。

1.标签选择器：

作用：根据标签的名字找到标签；

注意：它会找到所有的同名标签。

    
    
    
    
    
我是段落标签1
我是段落标签2

注意：

你可以理解为下图这个整体叫做选择器！！！

2.类选择器（class选择器）

通过标签的class属性，选择对应的元素，借助了一个类的概念，一处定义，可以多处使用。

使用场景：它的作用对多个标签（往往需要相同的样式）设置样式。

一个标签可以设置多个class值，值与值之间用空格隔开，这个标签会具有所有class包含的样式。

    
    

    我是段落标签

小tip：

类选择器可以选择多个，因为class属性不唯一；
但是id选择器只能选择一个，因为id是唯一的。

3.id选择器

通过标签的id属性，选择对应的元素。

    
    

    我是段落标签

小tip：

以上三个选择器的权重： id选择器 > 类选择器 >标签选择器

拓展：如果一个标签同时通过id选择器和类选择器设置了同一个样式，而我们想要其类选择器设置的样式（background-color）生效，但是看上面选择器权重——类选择器的权重是低于id选择器的，应该是id选择器设置的样式生效。但是我们可以通过在指定样式后添加!import来使其生效！！！

!important是权重最大的！！！
注意：!important只能作用于单个样式的值，它不是选择器！

4.群组选择器

群组选择器是可以同时选择多个标签的选择器。

    
    

    
我是段落标签
我是文本标签
我是一级标签

5.全选择器

顾名思义，选择所有标签！

    
    

    
我是段落标签
我是一级标题
我是二级标签
我是文本标签

6.层次选择器（分为后代，子代，相邻和兄弟四种选择器）

注       意：块状标签可以嵌套内联标签和其他块状标签；内联标签只能嵌套文本和其他内联标签,但不能嵌套块状标签。
有个特例：p标签和h标签不能嵌套块状标签，也不能嵌套本身，只能嵌套内联标签！！！

（1）后代选择器

    
    

    
    

    

        
我是有序列表1
        
我是有序列表2
        
我是有序列表3            

                
我是有序列表111
                
我是有序列表222
            
        
    

（2）子代选择器（可以往里一层一层的选）

    
    

    
    
1
    
2
    
3    

        
11
        
22
        
33
    
    

（3）兄弟选择器

    
    

    
我是段落标签1
我是段落标签2
我是段落标签3
我是段落标签4

（4）相邻选择器（相邻兄弟选择器）

    
    

    
我是段落标签1
我是段落标签2
我是段落标签3
我是段落标签4

7.属性选择器

    
    

    我是段落标签1
我是段落标签2
我是段落标签3
我是段落标签4

选择器的一个使用总结：

权重大小比较总结一句话：越具体（就是一开始说的准确度）权重越大；越模糊权重越小！

8.伪类选择器

    
    
    
    
    
    
    
    我是超链接

第三部分：常用的字体的样式

    
    
    
我是段落标签
HELLO
hello

第四部分：文本的常用样式

    
    
    
我是一个段落标签
中国 上海 河南
111

行高的应用之实现单行文本垂直居中：

    
    
    
我是段落标签

第五部分：背景的常用样式

小拓展：使用CSS实现渐变色：

（1）渐变色之线性渐变

（2）渐变色之径向渐变

（3）拓展一个文本渐变色的实现：

    
    
    我是渐变的文字，我超级帅！

以上是“CSS的基础使用方法有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前名称：CSS的基础使用方法有哪些
标题来源：http://bjjierui.cn/article/pisisg.html