CSS基础

css基础

1.什么是css

• css是web标准中的表现标准，专门负责网页中内容的布局和样式
  目前使用的是css3

2.css的语法（怎么写）

a.基本结构
选择器{属性名1：属性值1；属性名2：属性值2；.......}

b.说明
选择器{} - 通过选择器决定样式是针对哪个标签写的（内联样式表中没有这个结构）
属性 - 属性名不是随便写的，必须是css通过并且支持的200+个属性中的一个；
属性名和属性值用冒号隔开，多个属性之间用分号隔开，（如果没有分号，会导致后面的所有属性无效）

3.css代码写在哪

内联样式表
将样式表作为html标签中的style属性的值
只能针对一个标签有效

内部样式表
将样式表作为head标签的style标签的内容
可以针对当前html中所有的标签

外部样式表
将样式表写在一个css文件中，再通过link导入
可以针对所有的html文件中的标签

优先级：内联样式优先级最高，内部和外部谁写在后面谁的优先级高

4.常用属性补充

color - 字体颜色
font-size - 字体大小
background - 背景颜色
width - 宽度
heigth - 高度

css中的颜色值：a.颜色的英语单词
b.rgb的16进制值；例如：#ff0000
c.rgb（）；rgba（）直接使用rgb值 rgb（r，g,b）;rgba（r，g,b,a）a是透明度：0~1,0是完全透明，1是不透明
css中的数字：如果这个数字表示大小，必须加单位 px（像素）或者em（空格）

    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
        
        
        
        
都看见爱上看
        
        

            
发生的空间发挥
            发生的空间发挥
        
        百度一下
        
        
我是h1
        
        
        
        
        
        点我啊

        
        点我啊
        
        
        
        
啥快递就暗示
        
    

显示效果

image.png

选择器

• style标签可以写在html的任何位置

  css通过的选择器的写法大概有十几种，常见的：

1.标签（元素）选择器：直接将标签名作为选择器，选中当前html中所有指定的内容

例如：a{}选中当前html中所有a标签

2.id选择器：将标签的id属性前面加#作为选择器，选择所有id指定值的标签

例如：#text{} - 选择当前所有id=”text“的标签

3.class选择器（类型选择器）：将标签的class属性值前面加.作为选择器，选中所有class指定值的标签

例如：.text{} - 选中当前html中所有class=“text”的所有标签

4.群组选择器： 将多个选择器用逗号隔开，作为一个选择器，同时选中每个单独的选择器选中的所有的标签

例如：p，#text，a，.text{} - 选中所有的p标签，a标签，和class=“text”以及id=”text“的标签

5.后代选择器：将多个选择器用空格隔开，作为一个选择器；从前往后一层一层的找，找到最后一个选择器对应的标签

例如：div .text #text {} - 选中div标签中class=“text”标签中id=“text”的标签

6.通配符：将*作为选择器，选中当前页面中所有的标签

例如： *{} - 选中所有的标签

    
        
        
    
    
        

            div1
            

                div2
            
  
            

                

                    heheheh
                
            
            
        

显示结果

image.png

伪类选择器

• 伪类选择器
  伪类选择器是用来选中标签的不同状态（为了标签的不同状态选中不同样式）

1.基本格式

普通选择器：伪类选择器

2.伪类选择器

1） link - 标签的初始状态（一般作用于a标签，表示a标签中的链接没有成功访问过对应的状态）
标签：link{} - 标签是通过各种选择器来选择的标签
例如： a：link{}

2. visited - 超链接被访问后的状态(一般作用于a标签)

3. hover - 鼠标悬停在标签上的时候对应的状态

4. active - 激活状态，鼠标按下还没有弹起的状态

5. 爱恨原则：当同一个标签需要同时给多个状态添加样式的时候，要遵守爱恨原则
   LoVeHAte 先link 再visited 再 hover 后active

    
        
        
        
        
    
    
        超链接
        
哈哈哈哈哈哈
    

显示结果

image.png