CSS

一、认识CSS

1.什么是css
css代码（css文件）我们又叫样式表
css是web标准中的表现标准，用来设置网页上标签的样式（长什么样、在什么位置），错了不会崩溃
作用：定制网页上的标签的样式的

目前我们使用的是css3

2.写在哪
（1）内联样式表---写在head标签中的style标签中
（2）内部样式表 ---写在标签的style属性中（style属性每个标签都有）
（3）外部样式表---写在一个专门的CSS文件中，然后在head中通过link标签来关联css文件

3.怎么写
选择器{属性：属性值；属性：属性值}
选择器作用：是用来选中需要设置样式的标签）
属性：css属性，（光css2中的属性就有两百多个）
属性值：如果属性值是数字，并且表示的是大小要在后面加px，否则无效

注意：每个属性之间用分号；隔开，否则属性无效

优先级：内联的优先级最高，内部和外部的优先级是，谁后写谁优先，后者会覆盖前者---（就近原则）

补充属性：
color---设置字体颜色
background-color---设置背景颜色
width---标签的宽度
height---标签的高度

    
        
        
        
        
        
        
        
        
        
        
        
    
    
        
        
        
我是谁？
        
    

css文件

注意：css中所有和大小相关的数字后面必须加单位：px 或者 %
px:代表像素
% :指的是百分比

div{

    width: 50%;
    color: red;
    
}

image.png

css选择器

0.元素选择器(标签选择器)：标签名
选中所有的标签名对应的标签

1.id选择器：#id属性值
每个标签都有一个id属性，整个html中，id的值必须唯一

2.class选择器：.class属性值
每个标签都有一个class属性，

3.通配符：*
选中所有的标签

4.层级选择器：选择器1 选择器2...

5.群组选择器：选择器1，选择器，....

补充:
css中的颜色值：
1.颜色英语单词
2.16进制的颜色值 0-255 -- 00-ff (#ff0000-红色)
3.rgb值：rgb(红,绿,蓝) rgba(红,绿,蓝,透明度) - 透明度 0~1

    
        
        
        
        
        
    
    
        
        
我是标题
        
            我是span
        
        
        

            

                aaa
                

            
            

                a1
                a2
                a2
                a2
                a2
            
            
        
        
        我是a
        我是a2
        
        
        
我是p
        
        

            我是div
            我是a3
        
        
        我是a4
        
    

image.png

伪类选择器

• 选择器：状态

• link：超链接的初始状态---即是一次都没有访问成功的时候的状态

• visited：超链接访问后的装态---已经访问成功后的状态

• hover:鼠标滑过超链接时对应的状态

• active：鼠标按住的状态

• 给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，要遵守爱恨原则(先要爱才能恨)--->LoVe HAte

    
        
        
        
        
        
    
    
        百度一下
        
        
        
    

image.png

选择器的权重

• 作用：判断优先级

• 类型选择器（元素选择器 ）、伪类选择器---0001

• class选择器---0010

• id选择器---0100

• 层级选择器（包含选择器）：多个选择器的权重之和

• 群组选择器：分开看每个选择器的权重

• 谁的权重的值大，谁的优先级就高

    
    
        
        
        
    
    
        百度一下
    

浮动

• 标准流：
  块标签---一个占一行，从上往下布局；
  行内标签---一行可以显示多个，从左往右布局，直到遇到边界才自动换行

• 脱流：
  （1）浮动:让竖着的横着来，float---值：left，right
  （2）定位

• 注意：
  （1）如果要使用浮动，那么同一级的所有标签都要浮动
  （2）如果父标签浮动，那么子标签的位置会跟着一起浮动
  （3）布局基本顺序：从上往下，从左往右

效果如下：

image.png

文字环绕

• 文字环绕: 被文字环绕的标签浮动，文字标签不浮动

    
        
        
        
    
    
        
            
        

            方递费加哈萨克货到付款撒都
分开哈萨克东方航
空撒货到付款阿士大夫
看撒谎快递费开始浇返回
        
    

效果如下：

image.png

清除浮动

• 清除浮动是指：因为浮动而产生的问题（高度塌陷）

• 注意：问题并不是什么时候都产生，一般就在父标签不浮动，而子标签浮动是产生

• 怎么清除浮动：

• (1)添加空的div
  在父标签（高度塌陷的标签）的最后添加一个空的div，并设置这个div的样式表：clear:both

缺点：可能会产生大量额外的代码

• (2)overfloat:hidden---兼容市场上大部分浏览器
  在父标签中设置样式表的overflow的值为hidden

• (3)万能清除法
  after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}

效果如下：

image.png

display属性

• 1.HTML中标签分为
  (1)块---一个占一行，默认宽度是100%，高度根据内容来定
  (2)行内

• 2.CSS中标签分为（前提：在标准流中）：
  (1)块标签(display:block)---一个占一行，默认宽度是100%，高度根据内容来定，直接设置宽高有效
  (2)行内块标签(display:inline-block)---一行可以有多个，默认宽高是内容的宽高，直接设置宽高有效
  (3)行内标签（display:inline）---一行可以有多个，默认宽高是内容的宽高；设置宽高无效

• 通过改变标签的display的值，可以让一个标签在块，行内块和行内之间任意切换

• 注意：inline-block标签的右边默认都有个问题，不能喝其他标签无缝连接（这个间隙目前无法清除）

定位

• 1.距离
  （1）top:标签顶部距离其他标签的位置
  （2）bottom:标签的底部距离其他标签的位置
  （3）left:标签左边到其他标签的位置
  （4）right:标签右边到其他标签的位置

• 2.position
  想要设置标签的top,bottom,left,right的值有效，必须设置标签的参考方法
  （1）initial:(默认值)没有参考对象
  （2）absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
  （3）relative:相对定位元素的定位是相对其正常位置。
  （4）fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
  （5）sticky:粘性定位（没有超出一屏，就在最后，超出一屏，就相对浏览器一直在下面）

标签的盒子模型

每一个标签都是由4个部分组成：

• 1.内容：显示内容的部分，可见（设置宽高的样式就是设置内容部分的大小）
• 2.内边距（padding）：可见，不能显示内容（通过设置padding值来改变其值，默认是0，）
• 3.边框（border）：可见，如果有padding则显示在内边距上，否则就显示在内容上
• 4.外边距（margin）：不可见，但是会占据浏览器的空间

    
        
        
        
            
    
    
        
abc
    

效果如下：

image.png

居中

• 1.垂直居中
  (1)固定标签高度
  (2)设置属性line-height的值和高度一样
• 2.水平居中

    
        
        
        
        
        
    
    
        
        

            
鹅鹅鹅，曲项向天歌
        
        
    

效果如下：

image.png

文字相关的CSS属性

• 1.文字大小
• 2.文字颜色
• 3.字体
• 4.字体粗细---> 值：100-900（且不需要加px）
• 5.文字倾斜
  italic(主要记住这个)
  oblique
• 6.内容对齐方式
  center---居中
  left---左对齐
  right---右对齐
• 7.垂直居中
  (1)先设置背景颜色
  （2）设置高度
  （3）设置行高（当文字只有一行的时候，设置行高和标签高度一样的时候，可以让文字垂直居中；多行无效）
• 8.文字修饰
  none---去掉文字修饰
  underline---添加下划线
  overline---添加上划线
  line-through---添加删除线
• 9.首行缩进
  单位：em---空格
• 10.字间距
  单位可以是px,也可以是em

    
        
        
        
        
    
    
        
        
你是我沿途最美的风景
红尘岁月，心系沧海
笑看流年，待春暖花开
站在我们相遇的地方，为你摇曳一生
冬雨摇曳，一季淡寒
你的心是一泓清澈的泉水，浇灌了我干涸的生命
今生爱上你，注定是一种流泪的幸福
春意盎然，迷醉江南三月天
剪剪风，一路春雨花香
如花人生，谁落寞了我的繁华！
日光倾城，春暖花开
红尘有爱，便不孤单
流年静好，只是曾经
守望远去的岁月
幽草漾斜阳墨染词殇
坚持，成就梦想
那弯浅浅的月，那滩浅浅的水
指尖里的夏天
写在沙滩上的故事
月色流离，守一季相思苦
自在飞花轻似梦，无边丝雨细如愁
寻找生活的美如果有来生
写给青春，写给岁月
为了爱而活着
这个夏日的风景
雪花飘落的时候
倾一座城，淡一场梦
破碎的美丽
你知道生活的意义吗？
等待着，一场邂逅
我的十一月
情怀的诉说
再见一帘幽梦
一脉心香，泪亦美丽
关于青春旅途
岁月无痕【原创】
年末的感思
记忆中的乡村夜晚
聆听的瞬间
你的名字，是我枕边的暖
深秋那抹阳光里有我们幸福的微笑
生命中的柳树
生命的幸福
心灵的驿站，梦恋的窗口
唯美的秋韵
不知名的花树
云淡风轻有何不可
        
    

效果如下：

image.png

列表相关的CSS属性

• 1.设置符号样式
  none---去掉列表符号（常用）
  disc---实心圆
  circle---空心圆
  square---实心方块
• 2.设置图片的符号
• 3.设置符号的位置
  outside---在li标签的外面
  inside---在li标签的里面

    
        
        
        
            
    
      
        

            
python
            
H5
            
Java
            
测试
     
        
        

效果如下：

image.png

背景相关

• 1.背景图
  如果背景图大于盒子的大小，背景图能显示多少就显示多少
  如果背景图小于盒子的大小，就会平铺（重复显示）
• 2.是否平铺
• 3.设置背景图片的位置
  background-position:x y;
  x---left,center,right,坐标值
  y---top,center,bottom,坐标值
• 4.同时设值
  background:图片地址 是否重复 x y
  background:图片地址 是否重复 x y 背景颜色

效果如下：

image.png