快速入门CSS

 

目录

 

 

一、前言

二、CSS文件引入方式

1、标签内直接编写

2、通过外部文件引入

3、标签内部style属性

4、导入式

三、选择器

1、标签选择器 标签都会生效

2、类选择器

3、id选择器的名字 因为id唯一，所以不能复用

4、层次选择器

（1）、后代选择器

（2）、子选择器

（3）、响铃兄弟选择器

（4）、通用选择器

5、伪类结构选择器

6、属性选择器 （常用）

四、字体

五、文本

六、伪类

1、 hover

2、active

七、列表

 

八、背景

九、盒子模型

1、border边框（块元素）

2、margin 外边距（可居中元素）

十、块元素和浮动

1、解决塌陷问题：

（1）、增加父级高、宽

（2）、在前后通过添加空的div（） 来清除ta的左或右浮动 来间接清除了目标浮动块

（3）、overflow:scroll 滚动条 文件超出父级大小会生成滚动条

十一、定位(块元素)

1、相对定位

2、绝对定位

3、固定定位

十二、动画

---

 

一、前言

 

主要用于网页的美化。

二、CSS文件引入方式

1、标签内直接编写

<style>

</style>

 

2、通过外部文件引入

 

<link rel="stylesheet" href="">

3、标签内部style属性

 

通过html标签中style属性编写

4、导入式

<style>
     
@import url("");
      
</style>

 它们直接的优先级：

就近原则，哪个离目标越近就谁生效

三、选择器

 

1、标签选择器 标签都会生效

p{
        
    color: red;
  }

2、类选择器

根据class选择,类名相同的都会生效

.asd{

      color: red;

    }

3、id选择器的名字 因为id唯一，所以不能复用

 

 #weq{
         color: red;
      }

选择器优先级：id选择器>class选择器>标签选择器

 

4、层次选择器

（1）、后代选择器

通过空格表示后代

X标签内部的P标签都会生效

 body p{
      color: red;
  }

（2）、子选择器

只会生效一代，即内部的最外层才会生效

body>p{
  color: red;
    }

（3）、响铃兄弟选择器

只会生效一个 #weq相临（下面）的一个标签

#weq+p{
 color: aqua;
 }

（4）、通用选择器

当前标签的下面相临的全部兄弟的标签会生效

 #weq~p{
    color: aqua;
}

5、伪类结构选择器

通过 : 符号来更具体选择

#weq的父级元素的第一个子元素

 #weq:first-child{
   color: aqua;
  }

last-child:最后一个子元素

 

 

根据父级定位
#weq 父级的第二个子标签

#weq:nth-child(2){
   color: red;
}

6、属性选择器 （常用）

 = 绝对等于
 *= 属性中包含某个字符

选择 Y标签中属性为x的元素

p标签中id=weq的元素

 p[id="weq"]{
    color: red;
   }

选中类属性名字中有weq的元素（weq是类名的子集）

p[class*="weq"]{
 color: red;
}

选中类名以s结尾的元素

  p[class$="s"]{
   color: red;
  }

四、字体

font
font-family  字体样式
font-size   大小
font-weight 粗细
color 字体颜色
font: 粗细 大小/行高 字体;

五、文本

 text-align 文本排版（居中center、靠左left、靠右right）
 text-indent  首行缩进 em字母
 line-height  行高 和当前块的高度一致会上下居中
 text-decoration: red underline; 装饰 颜色 下划线 none(去除装饰，下划线)
 text-shadow: blue 10px 10px 2px;文字阴影  阴影颜色 水平偏移 垂直偏移 阴影半径

六、伪类

1、 hover

鼠标悬停时候生效，改变颜色

 a:hover{
   color: red;
 }

2、active

鼠标按住时候的状态
鼠标按住未释放时候改变颜色

 p:active{
 color: blue;
 }

七、列表<ul>

      ul li{
          list-style: none;
       }

             list-style 列前的装饰
             none 去掉点
             circle 空心圆
             decimal 有序数字

八、背景

 背景颜色
 背景图片

 background-color 背景颜色
 background-image: url(""); 背景图片默认平铺满
 background-repeat 平铺方式 repeat-x 水平平铺 on-repeat 不平铺
 background: red url("") 20px  10px no-repeat; 颜色 图片 图片位置 平铺方式
 background:linear-gradient

九、盒子模型

 margin:外边距
 padding 内边距
 border 边框

1、border边框（块元素）

 width:长
 height 宽
 border: 3px solid black; 粗细 样式 颜色
 border-radius: 20px 30px 30px 20px; 圆角边框 画图形

2、margin 外边距（可居中元素）

 margin 0 0; (上右 下左)
 margin 0 0 0 0; （上 右 下 左）
 内边距一致

十、块元素和浮动

  display:   inline-block 设置块元素       设置块元素
  float: left ;  往左浮动。  左右浮动

1、解决塌陷问题：

clear right 右测不允许有浮动 left、

（1）、增加父级高、宽

（2）、在前后通过添加空的div（） 来清除ta的左或右浮动 来间接清除了目标浮动块

原理类似的还有：

 #weq:after{
     content: '';
     display: block;
    clear: both;
     }
     在#weq 的后面设置一块空内容,把这个空内容设置成块元素并清除浮动

（3）、overflow:scroll 滚动条 文件超出父级大小会生成滚动条

在父级元素添加 overflow：hidden 更具父级元素自适应高宽

十一、定位(块元素)

1、相对定位

 position:relative ;
 相对原来位置进行偏移，本质上不是改变位置

2、绝对定位

  position:absolute;
  基于xx的定位
      (1)、没有父级元素定位的前提下，相对与浏览器定位
      (2)、假设父级元素存在定位。会相对于父级元素进行偏移

3、固定定位

 相对窗口而言 不会因为滚动条发生变化而改变
    position: fixed;

十二、动画

z-index: 设置图层
opacity: 透明度
filter: Alpha(opacity=50); 透明度
动画效果 css3 新增 需要后续学习