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.直接写在标签内(直接在标签内设置)




    
    CSS的引入方式1







我是段落标签

小知识点:

在设置属性color属性时,如下图操作,可以对颜色进行更加直观详细的选择:
CSS的基础使用方法有哪些

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


    
    CSS的引入方式2
        
        
    

我是段落标签

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

第一种:用@import "1.css"将css文件引入;
第二种:通过< link >将css文件引入。

本处用的1.css文件内容:
CSS的基础使用方法有哪些


    
    CSS的引入方式3

    
    
    

    
    

我是段落标签2

小知识点:

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

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

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

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


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

如果一个标签通过外部样式,内部样式设置了同一类样式(值不同),会产生覆盖效果————覆盖的原则:后写的样式覆盖先写的样式!

第二部分:选择器

(1)选择器权重:

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

(2)选择器的用处:

用于准确的选中元素(就是HTML种讲的标签),并赋予样式。

1.标签选择器:

作用:根据标签的名字找到标签;
注意:它会找到所有的同名标签。

    
    标签选择器
    
    
    

我是段落标签1

我是段落标签2

注意:

你可以理解为下图这个整体叫做选择器!!!
CSS的基础使用方法有哪些

2.类选择器(class选择器)

通过标签的class属性,选择对应的元素,借助了一个类的概念,一处定义,可以多处使用。
使用场景:它的作用对多个标签(往往需要相同的样式)设置样式。
一个标签可以设置多个class值,值与值之间用空格隔开,这个标签会具有所有class包含的样式。

    
    类选择器

    我是段落标签

小tip:

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

3.id选择器

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

    
    id选择器

    我是段落标签

小tip:

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

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

!important是权重最大的!!!
注意:!important只能作用于单个样式的值,它不是选择器!
CSS的基础使用方法有哪些

4.群组选择器

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

    
    群组选择器

    

我是段落标签

我是文本标签

我是一级标签

5.全选择器

顾名思义,选择所有标签!

    
    全选择器

    

我是段落标签

我是一级标题

我是二级标签

我是文本标签

6.层次选择器(分为后代,子代,相邻和兄弟四种选择器)

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

(1)后代选择器


    
    后代选择器

    
    

    

            
  1. 我是有序列表1
  2.         
  3. 我是有序列表2
  4.         
  5. 我是有序列表3            
                      
    1. 我是有序列表111
    2.                 
    3. 我是有序列表222
    4.             
            
  6.     

(2)子代选择器(可以往里一层一层的选)


    
    子代选择器

    
    
  • 1
  •     
  • 2
  •     
  • 3    
              
    • 11
    •         
    • 22
    •         
    • 33
    •     
        
  • (3)兄弟选择器

    
        
        兄弟选择器
    
        

    我是段落标签1

    我是段落标签2

    我是段落标签3

    我是段落标签4

    (4)相邻选择器(相邻兄弟选择器)

    
        
        相邻兄弟选择器
    
        

    我是段落标签1

    我是段落标签2

    我是段落标签3

    我是段落标签4

    7.属性选择器

    
        
        属性选择器
    
        我是段落标签1

    我是段落标签2

    我是段落标签3

    我是段落标签4

    选择器的一个使用总结:

    权重大小比较总结一句话:越具体(就是一开始说的准确度)权重越大;越模糊权重越小!
    CSS的基础使用方法有哪些
    CSS的基础使用方法有哪些

    8.伪类选择器

    
        
        伪类选择器
        
        
        
        
        
        我是超链接

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

    
        
        字体的常用样式
        

    我是段落标签

    HELLO

    hello

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

    
        
        文本常用样式
        

    我是一个段落标签

    中国 上海 河南

    111

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

    
        
        行高的一个应用
        

    我是段落标签

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

    
        
        背景的常用样式
        

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

    (1)渐变色之线性渐变

    
        
        渐变色之线性渐变
        

    (2)渐变色之径向渐变

    
        
        渐变色之径向渐变
        

    (3)拓展一个文本渐变色的实现:

    
        
        渐变色之文字渐变
        我是渐变的文字,我超级帅!

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


    当前标题:CSS的基础使用方法有哪些
    网页网址:http://myzitong.com/article/pisisg.html