最新CSS入门总结-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62375676/article/details/142927505

CSS（层叠样式表）是一种用于网页样式设计的语言，它通过为 HTML 标签添加样式来控制网页的外观和布局。CSS 可以设置元素的颜色、字体、间距、对齐方式等，还可以用于创建响应式设计，以适应不同设备的屏幕尺寸。CSS 是前端开发的核心技术之一，和 HTML 一起构建网页的内容和视觉效果。

a、什么是CSS

1、Casacding Style Sheet 层叠级联样式表

CSS：表现美化网页

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

2、发展史

CSS1.0

CSS2.0 DIV（块）+ CSS HTML与CSS结构分离的思想，使网页变得简单 SEO

CSS2.1 浮动定位

CSS3.0 圆角阴影动画浏览器兼容性

3、快速入门

第一种方式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  规范 style 可以编写css的代码
语法：
    选择器{
        声明1：
        声明2：
        声明3
    }
-->
  <style>
    h1{
      color: #000;
    }
  </style>
</head>
<body>
<h1> 我是标题 </h1>
</body>

第二种方式

CSS优势：

内容和表现分离

网页结构表现统一，可以实现复用

样式十分的丰富

建议使用独立于html的css文件

利用SEO，容易被搜素引擎收录

4、CSS的3种导入方式

行内样式

<h1 style="color: green"> 我是标题 <h1/>

内部样式

<style>
    h1{
        color：red
    }
</style>

外部样式

属性写在 css文件中
然后导入
<link rel="stylesheet" href="css/style.css">

b、选择器

作用：选择页面上的某一个或者某一类元素

1、基本选择器

标签选择器：选择一类标签语法——标签{}

类选择器：选择所有class属性一致的标签，跨标签语法——.类名{}

Id 选择器：全局唯一语法——#id名称{}

id》class》标签

2、层次选择器

2.1、后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

/* 后代选择器*/
    body p{
      background: green;
    }

2.2、子选择器：一代儿子

/* 子选择器 */
    body>p{
      background: olive;
    }

2.3、相邻兄弟选择器：同辈，就是下面的一个换变化，不是本身

/* 相邻 弟弟选择器*/
    .qingjiang + p{
      background: blue;
    }

2.4、通用选择器：就是本身，下面的所有标签

/* 通用选择器*/
    .qingjiang~p{
      background: blueviolet;
    }

3、结构伪类选择器

伪类：条件

  <style>
    /* ul的第一个子元素*/
    ul li:first-child{
      background: red;
    }
    ul li:last-child{
      background: olive;
    }
    /* 定位到本身的 父元素 ，选中父级元素的第一个元素*/
    p:nth-child(1){
      background: brown;
    }
  </style>

4、属性选择器（常用）

语法：标签【属性名】{}

 <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: blue;
      text-align: center;
      color: gainsboro;
      text-decoration: none;
      margin-right: 5px;
      font:bold 20px/50px Arial;
    }
    /* 存在 id属性的元素   a[]{}  翻译：a标签带有id属性*/
    /* = 代表绝对等于
       *= 包含这个元素
       ^= 以什么开头
       $= 以什么结尾*/
    /*a[id]{*/
    /*  background: yellow;*/
    /*}*/
    a[id=first]{
      background: green;
    }
    /* class中 有link的元素*/
    a[class*="link"]{
      background: chartreuse;
    }
    /* 选中href中以http开头的元素*/
    a[href^=http]{
      background: crimson;
    }
    /* 选中以com结尾的href元素*/
    a[href$=com]{
      background: black;
    }
  </style>
</head>
<body>
<p class="demo">
  <a href="https://baidu.com" class="link item first" id="first" >1</a>
  <a href="" class="linksitem active" target="_blank" title="text">2</a>
  <a href="images">3</a>
  <a href="">4</a>
  <a href="">5</a>
  <a href="">6</a>
  <a href="">7</a>
  <a href="">8</a>
  <a href="">9</a>
  <a href="abcd.doc" class="link item last">10</a>
</p>
</body>

5、美化网页元素

5.1、为什么要美化网页

有效的传递页面信息、美化，页面漂亮，才能吸引用户，凸显页面的主题，提高用户的体验

5.2、字体样式

1、font-family：字体

2、font-size：字体大小

3、font-weight：字体粗细

4、color：字体颜色

5.3、文本样式

1、颜色：coor，rgb，rgba

2、文本对齐的方式：text-align = center

3、首航缩进：text-indent：2en

4、行高：line-height

5、装饰：text-decoration

6、文本图片水平对齐：vertical-align：middle

5.4、阴影

/* text-shadow：阴影颜色 水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow：#3cc7f5 10px -10px 2px；
}

5.5、超链接伪类

正常情况下：a，hover（鼠标悬浮的颜色）

a{
    text-decoration:none;
    color:#000;
}
/* 鼠标悬浮的颜色 */
a:hover{
    color: orange;
    font-size: 50px;
}

5.6、列表

/* ui li */
list -style：
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形

5.7、背景

背景颜色

背景图片

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 1000px;
      height: 700px;
      border: 1px solid red;
      background-image: url("images/icon.png");
      /* 默认是全部平铺*/
    }
    .div1{
      background-repeat: repeat-x;
    }
    .div2{
      background-repeat: repeat-y;
    }
    .div3{
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

第二种方式

/* 颜色 图片 图片位置 平铺方式*/
background: red url("images/icon.png") 270px 10px no-repeat;

5.8、渐变

c、盒子模型

1、什么是盒子模型

外边距：margin

内边距：padding

边框：border

1.1、边框

边框的粗细

边框的样式

边框的颜色

border: 1px solid red;
/* 粗细 状态 颜色*/

1.2、内外边距

/*  上 下 左 右*/
margin: 1px 2px 3px 4px
padding: 1px 2px 3px 4px
/* 上下 左右*/,居中
margin: 0px auto;

盒子的计算方式：你这个元素到底多大

margin+border+padding+内容宽度

1.3、圆角边框

4个角

<!-- 4个 = 左上  右上  右下  左下    顺时针
2个 = 左上+右下    右上+左下-->
div{
      width: 100px;
      height: 40px;
      margin: 30px;
      background: red;
      border-radius: 50px 50px 0px 0px;
    }

1.4、阴影

可以发光

div{
      width: 100px;
      height: 100px;
      border: 10px solid red;
      box-shadow: 10px 10px 1px yellow;
      /*第三个数值越大，越模糊*/
    }

1.5、浮动

块级元素：独占一行

h1~h6   p   div 列表...

行内元素：不独占一行

span    a   img     strong  em  br  input

行内元素可以被包含在块级元素中，反之，则不可以

display

/*display*/-
/* black：转化为 块元素
inline：转化为 行内元素
inline-black：可以是行内也可以是块元素，可以内联*/
.layer01{
    border: 1px #F00 dashed;
    display: inlin-black;
}
.layer02{
    border: 1px #00F dashed;
    display: inlin-black;
}
.layer03{
    border: 1px #060 dashed;
    display: inlin-black;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
}

display也是一种实现行内元素排列的方式，但是很多情况下是使用float

float

浮动就是独立于原来的地方，浮起来。左右浮动

.layer01{
    border: 1px #F00 dashed;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    float: left;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
}

父级边框塌陷的问题

/*
clear：right 右侧不允许有浮动元素
clear：left 左侧不允许有浮动元素
clear： both 两侧不允许有浮动元素
*/

浮动超出边框内容解决方案：

1、增加父级元素的高度（不推荐）

弊端：元素设有了固定的高度，会被限制

2、增加一个空的div标签，清除浮动

<div class="clear"><div/>

.claer{
    clear:both;
    margin:0;
    padding:0;
}

弊端：设置无用的div

3、overflow

在父级元素中增加一个 overflow： hidden

弊端：简单，下拉的一些场景避免使用

4、父类添加一个伪类：after（推荐使用）

#father:after{
    content: '';
    display: block;
    clear: both;
}

优势：写法稍微复杂，没有副作用

1.6、定位

1、相对定位

相对定位，相对于自己原来的位置进行偏移，先有position再有各个方向的数值。原来的位置会被保留

    #first{
      background-color: #0000FF;
      border: 1px solid #666;
      position: relative;  /* 相对定位 上下左右*/
      top: -20px;
      left: 20px;
    }

2、绝对定位

定位：基于XXX定位，上下左右-

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

    #second{
      background-color: orange;
      border: 1px solid #666;
      position: absolute;
      right: 30px;
    }

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来位置不会被保留

3、固定定位

fixed，定死

    div:nth-of-type(2){ /* fixed 固定定位*/
      width: 50px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }