CSS基础

Posted 2021-12-15 lyl-0667

1. CSS基本语法

CSS是层叠样式表

1.1. CSS基本定义

选择器
  属性： 值；
  属性： 值；


div
    width:100px;
    height:100px;
    background:gold;

• 选择器是将样式和页面元素关联起来的名称
• 属性是希望设置的样式属性，每个属性有一个或多个值

CSS引入页面的方法

1. 在HTML中通过外联方法   外部样式表  通过link引入

<link rel = "stylesheet" type="text/css" href="css/style.css">

         2.内联式，通过标签的style属性，直接在标签上写样式,内部样式表

<div style="width: 100px; height: 100px">..</div>

         3.嵌入式： 通过style标签   行内样式表

<style type="text/css">
    div width:100px; height:100px; background:red 
    ......
</style>

1.2. CSS布局属性

width,宽度

height,高度

background,背景

border, border：1px solid red；设置元素边框

padding,设置内容和元素边框距离

margin,元素和容器的距离，margin：10px auto  0；居中

float，设置元素浮动，分为float：left；左浮动，float：right；右浮动

1.3. CSS文本常用属性

常用的应用文本的css样式

color，文本颜色    颜色值

font-size，文字大小   px值

font-family，文字字体    字体名称

font-weight，字体是否加粗  normal：不加粗，bold ：加粗

font-style，字体是否倾斜   normal：不倾斜，italic：倾斜

font，同时设置上面的属性  加粗  字号 /行高   字体

line-height，文字的行高    px值

text-decoration，文字的下划线    none去除下划线

text-align，文字的水平对齐方式   center字体居中

text-indent，文字的首行缩进     首行缩进24px

2.CSS选择器

2.1. 元素选择器

2.2. id选择器

2.3. 类选择器

2.4.通配符选择器

2.5. 伪类和伪元素选择器

• 常用的伪类选择器为hover，表示鼠标悬停在元素上时的状态

/* 鼠标放到list类下的a时，会变色 */
.list a:hover
  color: gold;

• 伪元素选择器有before和after，它们可通过样式在元素中插入内容

/* 块级首行 */
/* 在p,div，body等块级元素才有效果 */
::first-line
  color: red;


/* 块级首字母 */
::first-letter
  color: red;


/* 文本前插入内容 */
/* 变成：点击百度 */
a::before
  content: ‘点击-‘;


/* 文本后插入内容 */
/* 百度搜索 */
a::after
  content: ‘搜索‘;

3.盒模型

3.1什么是盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是现实盒子的比喻，帮组我们设置元素对应的样式

• 盒子的边框：border
• 盒子内的内容和边框的间距：padding
• 盒子和盒子之间的间距：margin

3.2设置边框

border：1px solid red；

border-top/bottom

border-left/right

solid：实线
dashed：虚线
dotted：点阵
double：双实线

.box
  width: 200px;
  height: 100px;
  background-color: red;

  /* 设置顶部边框的宽度，颜色 */
  /* border-top-width: 10px;
  border-top-color: #000; */
  /* 设置线的样式，实线solid， 虚线dashed， 点线dotted */
  /* border-top-style: solid; */
  /* 全部一下子来写 */
  /* border-top: 10px solid #000; */

  border: 10px solid orange;

3.3盒子内边距

padding

padding-top/bottom

padding-left/right

 

.box
  padding: 20px;

  /* 上，右，下，左 */
  /* padding: 10px 20px, 10px, 20px; */

 

3.4盒子外边距

margin

margin-top/bottom

margin-left/right

 

注意

       1.当两个垂直外边距相遇时，它们将形成一个新的外边距，这个新的外            边距长度等于两个发生合并的外边距的高度中的最大值，解决方法是

 

• 只设置margin-top,不设置margin-bottom
• 将元素浮动或者定位

         2.盒子水平居中方法 :使用auto平分水平距离

4.css浮动

4.1、盒子位置

 

 左浮动的盒子向上向左排列
 右浮动的盒子向上向右排列
 浮动盒子的顶边不得高于上一个盒子的顶边
-若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间容纳盒子，然后向左或向右移动

4.2、当常规流遇上浮动
常规流盒子和浮动盒子混合摆放
浮动盒子在摆放时，要避开常规流盒子
 常规流盒子在摆放时，无视浮动盒子，
常规流盒子的自动高度计算时，无视浮动盒子—--高度坍塌
清除浮动：clear
对一个元素清除浮动，可以上该元素在摆放时，出现在浮动元素的下方。
clear的默认值为none：不清除浮动
left：清除左浮动，元素在左浮动的盒子下方摆放
right：清除右浮动，元素在右浮动的盒子下方摆放
both：清除左右浮动，元素在浮动的盒子下方摆放
对最后一个子元素使用clear：both，可防止父元素高度坍塌

5.定位

5.1、定位简介

可以使用CSS的position属性来设置元素的定位类型，position的设置项如下：

relative： 相对定位元素，元素所占的文档流位置不变，元素本身相对文档流进行位置偏移

absolute：绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，就相当于body元素定位 ，初始化包含块

fixed：固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为为漂浮在文档流的上方，当有滚动条的时候，元素会跟随滚动条一直显示

5.2相对定位

.con
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  margin: 100px auto 0;


.con div
  width: 200px;
  height: 100px;
  margin: 20px;
  background-color: gold;
  font-size: 40px;
  text-align: center;
  line-height: 100px;



.box01
  position: relative;
  top: 80px;
  left: 50px;
  background-color: green;

5.3、绝对定位

 

.box01
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: green;

 

5.3、固定定位

跟随滚动框走，永远显示在视口的某个位置，多用于小广告

.box01
  position: fixed;
  top: 50px;
  left: 50px;
  background-color: green;

5.4、定位元素的特性

 

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

5.5、堆叠

堆叠级别（stack level）
它决定了元素谁显示在前端谁显示在后，
通常情况下，堆叠级别越高，显示越靠前
通过z-index属性可设置元素的堆叠级别
z-index：不可继承，默认值为auto（自动，通常情况下，书写顺序靠后的元素靠前显示），其他数值的话，手动设置堆叠级别，堆叠级别原告的元素靠前显示。
不要用于静态位置的元素：posotion=static
尽量不要使用z-index