CSS

最新推荐文章于 2024-01-15 00:00:00 发布
最新推荐文章于 2024-01-15 00:00:00 发布
阅读量182 收藏
点赞数
分类专栏： 前端 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38726829/article/details/103216080
版权

目  录

1. 引入

2. CSS

2.1 CSS使用方式

2.1.1 行内样式

2.1.2 内部样式

2.1.3 外部样式（项目中推荐适用）

2.2 CSS语法

2.2.1 选择器

2.2.2 常用的CSS属性和值

2.2.3 DIV+CSS布局（盒子模型）

2.2.4 CSS定位

1. 引入

  • html：负责网页的结构

  • css：负责网页的美观（样式）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css入门</title>
<style type="text/css">
	a{
		font-size:24px;
		color:#FC6;
	}
</style>
</head>

<body>
<a href="">超链接</a><br/>
<a href="">超链接</a><br/>
<a href="">超链接</a><br/>
<a href="">超链接</a><br/>
</body>
</html>

 

2. CSS

（Cascading Style Sheet层叠样式表），简称：样式

作用：负责网页的美观

 

2.1 CSS使用方式

2.1.1 行内样式

                 标签的style属性进行CSS属性控制，CSS内容写在style属性值中。弊端：只能控制一个标签的样式。

<a href="" style="font-size:24px;">超链接</a>

           

2.1.2 内部样式

                  html页面<head>标签中的<style>标签进行CSS属性控制，CSS内容写在style标签体中。

                  好处：一次控制多个标签的样式。

                  弊端：和html标签混杂，维护性差。CSS内容无法适用多个html页面。

<head>
<meta charset="utf-8">
<title>css入门</title>
<style type="text/css">
    <!-- a随意取的，可以换成任意名字 -->
	a{
		font-size:24px;
		color:#FC6;
	}
</style>
</head>

2.1.3 外部样式（项目中推荐适用）

  1. 建立独立后缀名为.css的文件，CSS内容写在该文件中。
  2. 在需要适用CSS的页面的<head>标签中导入外部的CSS文件
<!-- 
	link  导入外部css文件
    常用的属性：
    	href	外部css文件的位置
        rel		表示关联的是样式表
   -->
<link href="01.css" rel="stylesheet"/>

                          外部css文件内容

	a{
		font-size:24px;
		color:#3F3;
	}

2.2 CSS语法

  • 选择器（selector）：选择需要添加样式的标签           

  • CSS属性：给选择的标签添加什么样式：字体大小，颜色，背景。。。

  • CSS值：样式的具体值：12px，红色，背景图片。。。

 

2.2.1 选择器

               标签选择器：选择同名的标签

<style type="text/css">
    /*标签选择器：控制所有同名的标签的样式   举例：控制所有的div标签*/
	div{
		font-size:24px;
		color:#CF3;
	}
</style>

             

               类选择器：选择同类的标签

<style type="text/css">
    /*类选择器：通过标签的class属性控制样式，同类的标签使用同名的class属性值
              举例：控制标签class属性为c1的同一类标签
    */
	.c1{
		font-size:24px;
		color:#CF3;
	}
</style>

 

               id选择器：选择一个标签

<style type="text/css">
    /* id选择器：通过标签的id属性控制样式
            举例：控制标签id属性为d1的某个标签
	   		在同一个html页面中，不建议出现两个同名的id属性的标签 
       		因为javascript当中选择id标签时，getElementById("id属性值")就不能出现同名。
	*/
	#d1{
		font-size:48px;
		color:#96C;
	}
</style>

 

              并集选择器：合并多个选择器的css内容

<style type="text/css">	
    /* 并集选择器：多个选择器的css内容相同时可合并 
             举例：控制标签class属性为c1或者id属性为d1的所有标签的样式
    */	
	.c1,#d1{
		font-size:36px;
		color:#09F;
	}
</style>

     

              交集选择器：选择某选择器里面的子标签

<style type="text/css">	
    /* 交集选择器：控制某选择器里面的子标签的样式
	        举例：控制所有div标签里面的span标签的样式
	*/
	div span{
		font-size:24px;
		color:#96C;
	}
</style>

 

               通用选择器：选择所有的标签

<style type="text/css">
     /* 通用选择器：控制所有的标签   * 表示所有    */
	 *{
		font-size:24px;
		color:#96C;
	 }
</style>

 

               伪类选择器：控制选择器在不同状态下的样式

                      标签的四种状态：

  •  link               没有访问过的状态

  •  hover           鼠标经过的状态

  • active           鼠标激活状态（按下但没有松开）

  • visited          已被访问过的状态（鼠标按下并松开）

                      格式：

                            选择器：状态

<style type="text/css">
     /* 伪类选择器：控制选择器在不同状态下的样式
	       举例：控制a标签在四种状态下的样式 
	 */
	 /*使用link伪类控制-没有访问过的状态*/
	 a:link{
		font-size:24px;
		color:#F00; 
	 }
	 /*使用visited伪类控制-已被访问过的状态（鼠标按下并松开）*/
	 a:visited{
		font-size:30px;
		color:#999;
		text-decoration:none;
	 }
	 /*使用hover伪类控制-鼠标经过的状态*/
	 a:hover{
		font-size:36px;
		color:#FC6;
		text-decoration:none;
	 }
	 /*使用active伪类控制-鼠标激活状态（按下但没有松开）*/
	 a:active{
		font-size:48px;
		color:#0F0;
		text-decoration:underline;
	 } 	 
</style>

 

<!-- 伪类练习：实现鼠标经过表格内容的每行，行的背景颜色变为蓝色 -->
<style type="text/css">
	tbody tr:hover{      /* 交集选择器：对tbody标签里面的tr标签进行控制  */
		background-color:#00F;
	}
</style>

NOTE:

  1. 当一个标签被标签选择器和类选择器同时选中，类选择器优先

  2. id选择器的级别最高

  3. 伪类选择器中，hover状态必须置于link状态和visited状态之后才有效。active状态必须置于hover状态之后才有效

     正确的顺序： link      visited     hover    active

 

2.2.2 常用的CSS属性和值

         CSS文本

<style type="text/css">    
	  body{      /* 控制body标签样式 */
		  /* 颜色 */
		  color:#69F;
		  /* 字符间距：字符之间两两间隔多少像素 */
		  letter-spacing:10px;
		  /* 对齐方式：默认左对齐 */
		  text-align:center;
		  /* 文本修饰：下划线:underline 中划线:line-through 上划线:overline 没有:none */
		  text-decoration:underline;
		  /* 单词间距（以空格判断是否是一个词）：：字符之间两两间隔多少像素 */
		  word-spacing:30px;  
	  }
</style>

         

         CSS字体

<style type="text/css">
	body{
		/* 字体类型：读取系统默认的字体库，尽量使用通用的字体。
			       若你设置的字体别人系统中没有，则会使用默认的宋体显示
		 */
		font-family:"宋体";
		/* 字体大小 */
		font-size:24px;	
		/* 字体样式 正式：normal（默认） 斜（italic） 一般用于验证码 */
		font-style:italic;
		/* 字体粗细 bold（普通加粗，合适） 也可以自己设置加粗程度 */
		font-weight:bold;
		/* 简写属性(依次赋值:样式 粗细 大小 类型等，没有直接忽略)  默认值取决于浏览器*/
		font:normal bold 30px "黑体";
	}
</style>

 

         CSS背景

<style type="text/css">
	body{
		/* 背景颜色 */
		background-color:#F03;
		/* 背景图片（浏览..选择本机） */
		background-image:url(../a.jpg);
		/* 设置背景图片是否重复/如何重复
			no-repeat:不重复
			repeat-x: x轴重复
			repeat-y: y轴重复
			repeat:   x和y轴重复(默认)
		 */
		background-repeat:no-repeat;
		/* 设置背景图片的起始位置
		    参数一：图片显示的起始位置    top   center    bottom         看图片，不是看标签
			参数二：图片从指定标签的哪个位置开始显示   left  center  right  看标签，不是看图片
		 */
		background-position:top center;
		/* 简写属性(依次赋值：颜色 图片 是否重复 位置等，没有直接忽略) */
		background:#0FC url(../../b.jpg) no-repeat top left;
	}
</style>

 

         CSS列表

<style type="text/css">
	ul{
		/* 列表类型 */
		list-style-type:square;
		/* 设置列表符号图片 */
		list-style-image:url(../a.jpg);		
	}
</style>

 

         CSS表格

<style type="text/css">
	table{
		/* 合并表格的边框(默认分开) */
		border-collapse:collapse;
	}
</style>

 

         CSS边框

<style type="text/css">
	div{
		/* 边框颜色 */
		/*简写属性
			1）默认设置方向（1-4个值）：上右下左
			2）如果当前方向没有设置颜色，那么取对面的颜色
		*/
		border-color:#9F6 #6600FF #CC66CC #33FF00; 
		/* 单个设置 */
		border-left-color:#C93;
		border-right-color:#6F3;
		border-top-color:#6CF;
		border-bottom-color:#93C;
		/* 边框宽度 */ 
		/*简写属性
			1）默认设置方向（1-4个值）：上右下左
			2）如果当前方向没有设置宽度，那么取对面的宽度
		*/
		border-width:10px 20px 30px 40px; 
		/* 单个设置 */
		border-left-width:20px;
		border-right-width:30px;
		border-top-width:20px;
		border-bottom-width:30px;
		/* 边框样式:设置了样式，颜色和宽度才显示的出来，因为默认没有样式
			也可设置不同方向的样式
			solid:	单实线
			dashed:	虚线
			dotted:	点
			double:	双实线
		*/
		/*简写属性
			1）默认设置方向（1-4个值）：上右下左
			2）如果当前方向没有设置样式，那么取对面的样式
		*/
		border-style:solid dotted dashed dotted; 
		/* 单个设置 */
		border-left-style:dashed;
		border-right-style:dotted;
		border-top-style:double;
		border-bottom-style:solid;
		
		/* 所有边框属性的简写属性*/
		border:2px solid #F00;/* 4个方向都是2px，单实线，红色 */
	}
</style>

 

2.2.3 DIV+CSS布局（盒子模型）

盒子模型

        html页面上每个标签代表一个盒子，盒子是从上往下一个一个堆砌的，所以外边距都是相对于上面的盒子。

        盒子相关属性（从内往外）：

  •                 宽度（width）和高度（height）：决定盒子的容量（内容）

  •                 内边距（padding）：决定边框的内容的距离

  •                 边框（border）：决定盒子的厚度

  •                 外边距（margin）：决定盒子与盒子之间的距离

        firefox+firebug插件工具可以看盒子模型的布局，firebug插件工具可以临时调整预览大小，距离，厚度等。预览后OK了还得将修改更新到html文件中。

       一般网页布局中用插件调，调到满意为止！！！！！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
	div{
		/* 宽度和高度 */
		width:100px;
		height:100px;
		/* 设置内边距 */
		padding-left:10px;
		padding-top:20px;
		/* 设置边框 */
		border:3px solid #033;
	}
	#d2{
		/*设置外边距*/
		margin-top:20px;
	}
</style>
</head>

<body>
<div style="margin-bottom:10px;">div1</div><!-- 行内样式中的下外边距 -->
<div id="d2">div2</div>
</body>
</html>

     

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟QQ登录页面</title>
<style type="text/css">
	/* 主div */
	#main{
		width:450px;
		height:300px;
		border:1px solid #000;
		/* 设置外边距(相当于body)：上右下左 */
		margin:150px 0px 0px 400px;
		/* 设置背景图片 */
		background-image:url(QQ.jpg);
		background-repeat:no-repeat;
		background-position:top center;
	}
	/* 用户名div */
	#userName{
		/* 设置外边距(相当于主div)：上右下左 */
		margin:80px 0 0 100px;
		
	}
	/* 密码div */
	#userPwd{
	    /* 设置外边距(相当于userName div)：上右下左 */
		margin:15px 0 0 100px;
	}
	/* 按钮div */
	#btn{
	    /* 设置外边距(相当于userPwd div)：上右下左 */
		margin:15px 0 0 150px;
	}
	/* 注册div */
	#regBtn{
		margin-left:50px;
	}
	/* 设置用户输入框的背景 */
	#nameInput{
		background-image:url(profile.jpg);
		background-repeat:no-repeat;
		padding-left:25px;
	}
	/* 设置密码输入框的背景 */
	#pwdInput{
		background-image:url(pwd.jpg);
		background-repeat:no-repeat;
		padding-left:25px;
	}
</style>
</head>

<body>
<!-- div看作body的内容，可以设置div的外边距，body的内边距
		但二者效果不同：
			设置body的外边距，表示从外往内推，div的下面也会被影响
            设置div的外边距，表示从内往外推，只会影响div 
-->
<div id="main">
	<form>
    	<div id="userName">
        	用户名：<input id="nameInput" type="text" name="userName"/>
        </div>
        <div id="userPwd">
        	密&nbsp;&nbsp;&nbsp;码：<input id="pwdInput" type="password" name="userPwd"/>
        </div>
        <div id="btn">
        	<input type="submit" value="登录"/>
            <input type="button" value="注册" id="regBtn"/>
        </div>
    </form>
</div>
</body>
</html>

2.2.4 CSS定位

定位属性（position）

  •         相对定位（relative）：相对于元素原来的位置移动

  •         绝对定位（absolute）：相对于父标签，当前位置发生移动

  •         固定定位（fixed）：相对于浏览器，当前位置发生移动（不会相对于滚动条的位置发生改变）   网站的广告效果

                left         向右移动

                top         向下移动

margin是不会覆盖其他盒子的，但是position可能会覆盖。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css定位</title>
<style type="text/css">
	div{
		width:100px;
		height:100px;
		border:5px solid #333;
	}
	#div1{
		background-color:#F00;
	}
	#div2{
		background-color:#09C;
	}
	#div3{
		background-color:#0C0;
		/* 相对定位 */
		position:relative;
		left:10px;
		top:10px;
		/* 绝对定位 */
		position:absolute;
		left:20px;
		top:20px;
	}
	#div4{
		width:200px;
		height:200px;
		border:3px solid #FC3;
		background-color:#93C;
		/* 绝对定位 */
		position:absolute;
		left:200px;
		top:250px;
		/* 固定定位 */
		position:fixed;
		left:600px;
		top:400px
	}
</style>
</head>

<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容
<div id="div4">div4</div>
</body>
</html>

 

 

 

Freedom & Love
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 样式优先级
08-04 2万+
什么是CSS优先级？
CSS选择器
qq_30906791的博客
11-01 215
选择器是什么？ 选择一个或者一组特定元素的工具称作选择器 选择器本质上有3种类型，即 元素选择器 id选择器 类选择器 除了元素选择器外，两种最常见的选择器形式是id和class选择器。 元素（标签）选择器 元素选择器或标签选择器在HTML标签级别起作用。 当我们在CSS文件中直接为HTML标签添加样式时，这称为元素选择器。 h1{ color:red; } 我们直接将样式分配给了h1标签/元素，这种标签选择和样式化方法称为“元素选择器”，因为我们直接将样式
css投影
weixin_41824429的博客
10-08 6699
css投影
CSS表格
m0_57774967的博客
04-24 5603
一、表格边框 指定css表格边框，使用border属性 下面例子指定一个表格的th和td元素的黑色边框 html代码： css代码： 浏览器呈现效果： 注意：在上面的例子中的表格有双边框，这是因为表和th/td元素有独立的边界，为了显示一个表的单个边框，使用border-collapse属性 二、折叠边框 border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开 html代码： css代码： ...
CSS 阴影效果
Dominic_W的博客
05-14 3万+
CSS中，通过text-shadow、box-shadow两个属性分别为文本和元素添加阴影效果。 CSS语法 box-shadow: h-shadow v-shadow blur spread color inset; 向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。 h-shadow: 必需。水平阴影的位置，可以为负值 v-shadow:必需。垂直阴影的位置，可以为负值 blur:可选，阴影模糊的
CSS——rem
qq_48613863的博客
04-09 2万+
一、移动适配 1、什么是移动适配？ 答：就是当设备宽度不同的时候，网页元素的宽度和高度都要适配。 2、移动适配的两个解决方案。 rem：目前多数企业在用的解决方案; vw / vh：未来的解决方案。 两种都必须掌握！！！ 二、rem rem是移动适配的解决方案之一； rem就是一个单位； 回想之前学的单位，px不可以自动适配；百分比只能让宽自动适配，高还是要设置固定的值。 1、rem单位 是相对单位；rem单位是相对于HTML标签的字号计算结果；1rem = 1HTML字号大小。
CSS——less
qq_48613863的博客
04-09 8671
1、less简述 less就是简便书写css的工具，还是像写css那样写，只是有些比较简洁，可以写除法、选择器套选择器等等。保存.less文件，就会在同级别下自动生成.css文件。 在px单位转换到rem单位过程中，哪项工作是最麻烦的？ 答：除法运算。CSS不支持计算写法。解决方案：可以通过Less实现。 Less是一个CSS预处理器, Less文件后缀是.less； 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力； 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CS
28个炫酷的纯CSS特效动画示例（含源代码）
大剑师兰特的GIS世界
01-15 2万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
CSS遮罩层
weixin_44282093的博客
07-19 9320
css遮罩层
CSS中 设置( 单行、多行 )超出显示省略号
热门推荐
明天也要努力的博客
12-05 13万+
css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。 思路： 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了； 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数； 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本 说明
CSS重置
02-17
CSS重置 一个微小的默认CSS重置基于： 和 安装 NPM： npm install --save-dev css-reset 纱： yarn add css-reset 手动安装 首先，让我们克隆此存储库： git clone https://github.com/mlaurel/css-reset.git ...
bootstrap.min.css
02-23
用于渲染前端静态页面
bootstrap.css
01-27
bootstrap的css文件
LessCSS
07-22
资源名称：Less CSS内容简介：像写程序一样写 CSSLess CSS 是一个 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数...
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
element.css文件
最新发布
02-27
element.css文件
element-ui css
03-01
element-ui css
css
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值