css入门教程

最新推荐文章于 2023-05-20 11:50:03 发布
最新推荐文章于 2023-05-20 11:50:03 发布
阅读量210 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013457145/article/details/116239593
版权

文章目录

1 css概述

1.1 什么是css?

Cascading Style Sheet层叠级联样式表。

CSS表现：(美化网页)如字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等.

1.2 css发展史

  1. CSS1.0：19912月W3C发布了第一个有关样式的标准CSS1.0。这个版本中，已经包含了的相关font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。
  2. CSS2.0：1985年5月，CSS2.0正式推出。这个版本推荐的是内容和表现效果分离的方式，并开始使用样式表结构。
  3. CSS2.1：2004年2月，CSS2.1正式推出。它在CSS2.0的基础上略微做了改动，删除了许多不被浏览器支持的属性。
  4. CSS3：早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。

2 css使用

2.1 快速入门

规范:

案例一，直接在html页面中写css代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css测试</title>
  	<!-- 直接在html页面中写css代码 -->
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>这里是主体内容</h1>
</body>
</html>

案例二，通过导入css文件的形式加载css：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css测试</title>
  	<!-- 通过导入css文件的形式加载css -->
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>这里是主体内容</h1>
</body>
</html>

index.css：

h1 {
    color: red;
}

2.2 三种css导入方式

2.2.1 行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<body>
  <!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
	<h1 style="color: red;">这里是主体内容</h1>
</body>
</html>

2.2.2 内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
  	<!-- 内部样式 -->
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>这里是主体内容</h1>
</body>
</html>

2.2.3 外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css测试</title>
  	<!-- 外部样式 -->
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>这里是主体内容</h1>
</body>
</html>

优先级：行内样式 > 内部样式 > 外部样式

3 选择器

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

3.1 基本选择器

3.1.1 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        /* 标签选择器，会选择到页面上所有的这个标签的元素 */
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>这里是主体内容</h1>
</body>
</html>

3.1.2 class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
      /* 
      类选择器格式：.class的名称{} 
      好处：可以多个标签归类，使用同一个class，可以复用。
      */
      .title1 {
        color: red;
      }
      .title2 {
            color: #000;
        }
      .title3 {
            color: #efefef;
        }
    </style>
</head>
<body>
	<h1 class="title1">标题1</h1>
  <h1 class="title2">标题2</h1>
  <h1 class="title3">标题3</h1>
</body>
</html>

3.1.3 id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
      /* 
      id选择器格式：#id的名称{} 
      */
      #title1 {
        color: red;
      }
      #title2 {
        color: #000;
      }
      #title3 {
        color: #efefef;
      }
    </style>
</head>
<body>
	<h1 id="title1">标题1</h1>
  <h1 id="title2">标题2</h1>
  <h1 id="title3">标题3</h1>
</body>
</html>

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

3.2 层次选择器

3.2.1 后代选择器

/* 
	后代选择器, 元素后面的所有下级元素。
	例如：body下的所有p标签 
*/
body p {
	color: red;
}

3.2.2 子选择器

/* 
	子选择器
	只有一级
*/
body > p {
  color: red;
}

3.2.3 弟弟选择器

/* 
	弟弟选择器，元素紧跟着后面的一个[弟弟]元素。
*/
.title + p {
  color: red;
}

3.2.4 通用弟弟选择器

/* 
	通用弟弟选择器，元素紧跟着后面的所有[弟弟]元素。
*/
.title ~ p {
  color: red;
}

3.3 结构伪类选择器

/* ul的第一个li标签 */
ul li:first-child {
	color: red;
}
/* ul的最后一个li标签 */
ul li:last-child {
	color: green;
}

3.4 属性选择器

/* 标签中包含class属性的元素 */
a[class] {
  color: red;
}

/* 标签中class="title"属性的元素 */
p[class="title"] {
  color: green;
}

/* 标签中class属性值包含title的元素 */
p[class*="title"] {
  color: green;
}

/* 标签中href属性值以http开头的元素 */
a[href^="http"] {
  color: green;
}

/* 标签中href属性值以pdf结尾的元素 */
a[href$="pdf"] {
  color: green;
}

4 美化网页元素

4.1 文本样式

<style>
  div {
    /* 字体颜色 */
    color: red;
    /* 字体大小 */
    font-size: 14px;
    /* 对齐方式：left/center/right */
    text-align: left;
    /* 文本修饰线: overline/line-through/underline/blink */
    text-decoration: underline;
    /* 段落首行缩进 */
    text-indent: 2em;
    /* 行高，行高与容器高度一致，可以实现单行文字垂直居中 */
    line-height: 30px;
  }
</style>

<div>
  曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
</div>

案例：使右边的文字与左边的图片水平对齐。

image-20210426144150806

<style>
  img,span {
    /* 水平对齐，需要两个参照物：a,b */
    vertical-align: middle;
  }
</style>
<div>
    <img src="image/a.png">
    <span>曲曲折折的荷塘上面</span>
</div>

4.2 超链接伪类

<style type="text/css">
  a {
    /* 取消下划线 */
    text-decoration: none;
    /* 初始字体颜色 */
    color: #561A8B;
  }

  /* 伪类，鼠标悬浮 */
  a:hover {
    color: red;
  }
  /* 鼠标选中未释放 */
  a:active {
    color: green;
  }

  p {
    /* 取消外边距 */
    margin: 0;
    /* 字体大小 */
    font-size: 12px;
  }
  .price {
    /* 文本阴影 */
    text-shadow: 2px -2px 2px #000FFF;
  }
</style>
<div>
    <a href="#">
        <img src="image/b.png" alt="JAVA编程思想">
    </a>
    <a href="#">
        <p>JAVA编程思想</p>
    </a>
    <p>作者：<a href="#">[美] Bruce Eckel</a></p>
    <p>单价：<span class="price">￥99.00</span></p>
</div>

4.3 列表

ul li {
  /*
  默认样式：
  none：取消圆点;
  circle：空心圆;
  decimal：数字;
  square：正方形
  */
  list-style: none;
}

4.3 背景图片及渐变

<style>
  div {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    /* 背景颜色 */
    /* background-color: red; */
    /* 设置背景图片
    参数一：url图片路径,
    参数二：
      no-repeat：不重复
      repeat: 默认，平铺
      repeat-x: 水平重复
      repeat-y: 垂直重复
    */
    /* background: url("image/a.png") no-repeat; */
    /* 设置背景图像的起始位置 */
    /* background-position: right center; */
    /* 
    	综合写法
    	颜色 图片 水平位置 垂直位置 重复方式
    	水平位置：(percentage | length | left | center | right | 100px | 100％)
    	垂直位置：(percentage | length | top | center | bottom | 100px | 100％)
    	重复方式：(repeat | no-repeat | repeat-x | repeat-y)
    	*/
    background: red url("image/a.png") right center no-repeat;
  }
</style>
<div></div>

c

渐变：

https://www.grabient.com/

例如：

<style>
  body {
    background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  }
</style>
<body>
</body>

d

5 盒子模型

5.1 盒子模型样式

<style>
  .parent {
    /* 容器宽度，div容器默认宽度为100% */
    width: 200px;
    /* 容器高度 */
    height: 200px;
    /* 容器边框 */
    border: 1px solid red;
    /* 内边距, 上右下左 */
    padding: 20px 20px 20px 20px;
    /*外边距, 妙用：水平居中块级元素*/
    margin: 0 auto;
  }

  .child {
    /* 容器宽度，div容器默认宽度为100% */
    width: 100px;
    /* 容器高度 */
    height: 100px;
    /* 容器边框 */
    border: 1px solid green;
    /*外边距, 上右下左*/
    margin: 10px 10px 10px 10px;
  }
</style>
<div class="parent">
    <div class="child"></div>
</div>

e

5.2 边框圆角、阴影

<style>
  div {
    width: 100px;
    height: 100px;
    border:  1px solid red;
    /* 边框圆角，圆形:圆角的大小圆形的半径。 */
    border-radius: 20px;
    /* 盒子阴影 */
    box-shadow: 10px 10px 5px #888888;
  }
</style>
<div></div>

6 display和浮动

<style>
  span {
    /*
    block: 块元素
    inline: 行内元素
    inline-block: 既是块元素又是行内元素
    none: 隐藏
    */
    display: block;
    /* 浮动 */
    float: left;
    /*
    指定段落的左侧或右侧不允许浮动的元素
    (left|right|both|none|inherit)
    left: 在左侧不允许浮动元素。
    right: 在右侧不允许浮动元素。
    both: 在左右两侧均不允许浮动元素。
    none: 默认值。允许浮动元素出现在两侧。
    inherit: 规定应该从父元素继承 clear 属性的值。
    */
    clear: both;
  }
</style>

6.1 overflow与父级边框塌陷问题

解决方案一：增加父级元素高度。这种方案不好，因为有时候高度不是固定值。

.father {
  border: 1px solid red;
  height: 300px;
}

解决方案二：在浮动元素块后增加一个空的div标签，清除此div浮动

<style>
  .clear {
    clear: both;
    margin: 0;
    padding: 0;
  }
</style>
<div class="father">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

解决方案四：在父级元素中设置overflow:hidden

.father {
  border: 1px solid red;
  overflow: hidden;
}

解决方案四：在父级元素中设置伪类:after{}。推荐使用，避免了在程序中添加空div。

.father:after {
  content: "";
  display: block;
  clear: both;
}

测试案例：

<style>
  .father {
    width: 300px;
    border: 1px solid red;
  }

  .father > div:hover{
    cursor: pointer;
    color: red;
  }

  .father:after {
    content: "";
    display: block;
    clear: both;
  }

  .div1 {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    float: left;
  }

  .div2 {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    float: right;
  }

  .div3 {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    clear: both;
    margin: 0 auto;
  }

  .div4 {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
    float: left;
  }

  .div5 {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
    float: right;
  }
</style>
<div class="father">
    <div class="div1">方块1</div>
    <div class="div2">方块2</div>
    <div class="div3">方块3</div>
    <div class="div4">方块4</div>
    <div class="div5">方块5</div>
</div>

f

7 定位

7.1 相对定位

div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /* 相对定位,相对于原来的位置偏移 */
  position: relative;
  top: 10px;
  right: 10px;
}

7.2 绝对定位

注意：

  1. 在父级元素没有定位的情况下，是相对于浏览器的定位。
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移。
  3. 在父级元素范围内移动。
<style>
  .father {
    width: 300px;
    border: 1px solid red;
    position: relative;
  }
  .div1 {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
    position: absolute;
    left: 50%;
  }
</style>
<div class="father">
    <div class="div1">方块1</div>
</div>

7.3 固定定位

<style>
  .top-back {
    width: 50px;
    height: 50px;
    background: red;
    position: fixed;
    right: 10px;
    bottom: 10px;
  }
</style>
<div class="top-back"></div>

7.4 z-index

div {
  /* 设置层级 */
	z-index: 999;
  /* 透明度 取值：0~1 */
  opacity: 0.5;
}
逛窑子的李靖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS入门教程篇
10-30
CSS入门教程
html + css 入门教程
最新发布
02-18
html + css 入门教程
css入门教程资料（1）
newhappy的专栏
04-06 1817
CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐！前言CSS（Cascading Stylesheets，层叠
CSS Modules 入门教程
weixin_34324081的博客
08-27 241
为什么引入CSS Modules 或者可以这么说，CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验，具体来说可以归纳为以下几点： 全局样式冲突 过程是这样的：你现在有两个模块，分别为A、B,你可能会单独针对这两个模块编写自己的样式，例如a.css、b.css，看一下代码 // A.js import './a.css' const html = '<h1 class="...
css入门教程（一）
夏至的博客
01-23 469
CSS入门（一） 一.什么是CSS 1.CSS： cascading style sheet，中文译名为样式表或层叠样式表，是网页制作时采用的一种技术，用于更加灵活、有效地控制网页的布局、颜色、字体、背景等显示效果。 2.层叠次序： 样式通常保存在.css文件中，通过编辑一个外部的.css文件，可以同时控制多个页面的样式和布局。同样，一个页面也可以引入多个外部样式表。因此，这里会
学习CSS3这一篇就够了
热门推荐
轻松的小希
11-25 4万+
目录CSS第一章 CSS概述1.1、概述1.2、语法1.3、注释1.4、如何创建并引用1.4.1、外部样式表（外联式）1.4.2、内部样式表（内联式）1.4.3、内联样式（行内式）1.5、三种引入优先级第二章 CSS选择器2.1、id选择器2.2、class选择器2.3、标签选择器2.4、子代选择器2.5、后代选择器2.6、相邻兄弟选择器2.7、后续兄弟选择器2.8、交集选择器2.9、并集选择器2.10、通配符选择器2.11、伪类选择器2.11.1、anchor伪类2.11.2、input伪类2.11.3、
css快速入门教程
sc909090的博客
11-04 1599
前言  在开始之前，先做说明：本文只涉及到基本css知识，如果有做前端开发的同学跳过即可，本文针对刚刚入门以及从其他方向转向前端开发的同学。众所周知，CSS并不是一门编程语言，它的学习在前期主要来源于对属性的积累和各种属性的联合搭配，所以并不存在学通一门编程语言再学css就进度飞快的情况.  本文总结了作者所认为的，css入门必学的知识点，其他的可以在开发中，通过百度练习逐渐掌握，以下是本文所涉及的内容。 css基本使用方式和常用选择器 css层叠性和权重 css常用属性 css盒子模型 浮动 posit
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
CSS入门教程
03-18
非常好的css入门教程 只需一点html基础就能看
XHTML与CSS入门经典 从零开始系列教程
06-27
XHTML与CSS入门经典 从零开始系列教程<br>记事本格式，可能不太好阅读。但可以到网站上看
css教程
09-15
CSS基础教程 （css教程.pdf）
一套完整的CSS入门教程
AhCola
09-09 806
最近花了点时间，整理了一下之前的CSS博客文章，完成了这个CSS教程。也为我的个人网站，增加了一个教程模块。教程地址：请点击这里。 该教程是一套完整的CSS入门教程，看了绝对不会吃亏，不会上当☺。 我的个人网站也欢迎大家光临，你有任何问题都可以向我咨询，可以在我的文章下方留言，或者给我发邮件。 ...
CSS学习教程之简单入门
cug-jdc的博客
07-12 503
层叠样式表（CascadingStyleSheet，简称：CSS）是为网页添加样式的代码。本学习教程主要介绍 CSS 的基础知识，并解答类似问题：怎样将文本设置为黑色或红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？做一个简单的入门。对于CSS的学习可以分为以下四个部分来阶梯型进行： CSS基础 该部分介绍 CSS 的基础知识，包括选择器和属性，编写 CSS 的规则，将CSS 应用于 HTML 的方法，如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CS..
CSS入门
qq_47560372的博客
08-03 131
CSS：美化HTML页面，设置网页样式、布局。
【CSS】入门级教学（超级细致版本）
懒羊羊的博客
03-20 2874
html+css CSS是用来修饰HTML内容的打个比方 HTML相当于你买了一间房子而CSS就相当于装修这间房子。HTML定义网页的结构,主要让页面的内容结构化、块状化 CSS控制 HTML的标签,定义所需要的样式，美化网页。 p{}是用来修改段落间距参数的，针对于换行的元素之间 CLASS .****意思是名为****的类这样的标签
CSS零基础快速入门（详细教程）
小杨的博客
05-20 6245
CSS是层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；CSS还能够对网页中元素位置的排版进行像素级精确控制。
CSS入门 超详细
weixin_55816781的博客
04-12 7155
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
CSS基础
weixin_43366437的博客
07-27 154
css基础内容

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值