您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

CSS入门笔记

一、CSS简介

1、什么是CSS

  1. CSS:Cascading Style Sheet 层叠样式表

  2. 是一组样式设置的规则,用于控制页面的外观样式

2、为什么使用CSS

  1. 实现内容与样式的分离,便于团队开发
  2. 样式复用,便于网站的后期维护
  3. 页面的精确控制,让页面更精美

3、CSS作用

  1. 页面外观美化
  2. 布局和定位

二、基本用法

1、CSS语法

<head>
	<style>
		选择器{
			属性名:属性值;
			属性名:属性值;
		}
	</style>
</head>
  • 选择器:要修饰的对象(东西)
  • 属性名:修饰对象的哪一个属性(样式)
  • 属性值:样式的取值
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			background: #cccccc;
		}
		h2{
			color:blue;
		}
	</style>
</head>
<body>
</body>
</html>

2.CSS使用方法

  1. 直接写在标签
  2. 写在style 标签内
  3. 使用外部 .css 文件

示例:

<!--直接写在标签内-->
<p style=" color: aqua;">样式1,在标签内:你虽然没有出过国,但是你每天都在倒时差啊。</p>

<!------------------------------------------------------------------------------------------->

<!--写在style标签内-->
<style type="text/css">
		div{
		background: yellowgreen;
		width: 300px;
		}
</style>
<p>样式2,在sty1e中:人的想法是会变的。以前我也是想致富的,现在只想脱贫。</p>

<!------------------------------------------------------------------------------------------->

<!--使用外部.css 文件-->
<link rel=" stylesheet" type= "text/css" href="css/01css_ test.css"/>
		div {
			color: red;
		}
<p>样式3,在css文件中:别跟我说晚饭后需要节食,如果夜里不能吃东西,那冰箱为什么会有灯。</p>

<!-----------------------------------------------------------------------------=-------------->

三、选择器

1.选择器简介

选择器的作用:给指定的元素设置样式,能够更加精准。
选择器权重:选择器也有权重差别,当出现冲突样式的时候,选择权重大的样式。
选择器种类:有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器…

2.基础选择器

1 默认标签选择器
2. id选择器
3. class选择器
4.通配符选择器

/* 默认标签选择器-作用 于后面所有的div标签*/
div{
		background: yellowgreen;
		width: 300px;
		
/* id选择器-作用于某个id,给标签添加一个id属性*/
#div1 {
		background: orange;
		width: 200px;
		}
		
/* class选择器-作用于多个class标签,可以给多个标签添加c1ass属性*/
.wrap {
		background: azure;
		height: 150px;
		
/* *是通配符选择器,作用于页面上的所有选择器*/
.wrap{
		margin: 0;
		padding: 0;
		}

3.复杂选择器

选择器作用
1群组选择器同时对多个选择器进行样式设置,每个选择器之间用逗号分隔
2兄弟选择器div后面的兄弟都会选中,~两边的空格可写可不写
3相邻选择器只会选择相邻的标签,这个+号可以也可以写多个
4后代选择器作用于所有满足的后代.上面中间是空格这个是使用最多的选择器
5子代选择器只会作用于子代,不会作用于孙子辈
6属性选择器/
/*群组选择器-同时对多个选择器进行样式设置,每个选择器之间用逗号分隔*/
div,P {
		background: ye1l owgreen ;
		width: 300px; 
}


/*兄弟选择器-div后面的兄弟都会选中,~两边的空格可写可不写*/
div~ul {
		background: skyblue;
		}


/*相邻选择器-只会选择相邻的标签,这个+号可以也可以写多个*/ 
div+ul {
		background; 8kyblue;
		}


/*后代选择器-作用于所有满足的后代.上面中间是空格  这个是使用最多的选择器*/
div ol{
		list-style; none ;
		}


/*子代选择器-只会作用于子代,不会作用于孙子辈*/
div>ol {
list-style: none;
		}
		
/*属性选择器*/
input [ type-checkbox ] {
		width: 10px;
		height: 10px;
		}

4.伪类选择器

作用:通过伪类选择器,可以实现划入的时候再显示

根据不同的状态显示不同的样式,一般多用于 标签

四种状态:

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上,即移动在连接上
  • :active 选定的链接,被激活

注:默认超链接为:蓝色、下划线

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style>
		/*a:link{
			font-size: 12px;
			color:black;
			text-decoration: none;
		}
		a:visited{
			font-size: 15px;
			color:;
		}
		a:hover{
			font-size: 20px;
			color:blue;
		}
		a:active{
			font-size: 40px;
			color:green;
		}*/
		a:link,a:visited{
			color:#666666;
			font-size: 13px;
			text-decoration: none;
		}
		a:hover,a:active{
			color:#ff7300;
			text-decoration: underline;
		}
		/*普通的标签也可以使用伪类选择器*/
		p:hover{
			color:red;
		}
		p:active{
			color:blue;
		}
	</style>
</head>
<body>
	<a href="复杂选择器.html">复杂选择器.html</a>
	<p>CSS从入门到精通!</p>
</body>
</html>
————————————————
版权声明:本文为CSDN博主「是叽叽呀」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43331963/article/details/106784229

在这里插入图片描述

5.选择器的优先级

  • 选择器优先级概括如下:

在id > class > 标签

  • 复杂选择器的优先级比较如下:

    1.先比 id(最高位),再比 class,最后比 tagName (标签个数)
    2.id 个数不等,id越多,优先级越高
    3.id相同,class越多,优先级越高
    4.id,class都相同,则标签越多,优先级越高

四、常用属性

1.字体属性

属性含义说明
font-family字体字体浏览器;要求系统中要安装指定的字体,一般建议写3种字体:首选、其次、备用。以逗号隔开。
font-size字体大小1. inherited继承,默认从父标签继承字体大小(默认值),所有CSS属性的默认值都是inherited;2.px像素 pixel;3.%百分比,相对父标签字体大小的百分比;4.em倍数,相对于父标签字体大小的倍数
font-style字体样式取值:normal普通/italic斜体
font-weight字体粗细取值:normal普通(默认)/bold粗体/ 自定义400 normal 700 bold
font-variant大小写/
font复合样式使用单个类型,比较麻烦,因此可以使用复合类型,便于书写。注意:复合类型一定要严格按照样式来书写

font简写属性:font:font-style|font-weight|font-size|font-family

2.文本属性

属性含义说明
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值:left、center、right
vertical-align垂直对齐方式取值:top、middle、bottom可以用于图片和文字的对齐方式
text-indent首行缩进
text-decoration文本修饰取值:underline、overline、line-through
text-transform字母大小写转换取值:lowercase、uppercase、capitalize首字母大写
letter-spacing字符间距
word-spacing单词间距只对英文有效
white-space空白的处理方式文本超出后是否换行,取值:nowrap

文本类型主要是对于大段文本类型来进行样式设置
在这里插入图片描述
在这里插入图片描述

3.背景属性

属性含义说明
background-color背景颜色取值:transparent 透明
background-image背景图片必须使用url()方式指定图片的路径;如果是在css样式文件中使用相对路径,此时是相对于css文件,不是相对html文件
background-repeat背景图片的重复方式取值:repeat(默认),repeat-x,repeat-y,no-repeat
background-position背景图片的显示位置默认背景图显示在左上角;取值:关键字:top、bottom、left、right、center;坐标:左上角为(0,0)坐标,向右为x正方向,向下为y正方向
background-attachment背景图片是否跟随滚动取值:scroll(默认)、fixed固定不动
background简写简写以空格隔开,书写顺序没有要求

4.列表属性

属性含义说明
list-style-type设置列表前的标记取值:none、disc、circle、square、decimal;此时不再区分有序列表还是无序列表,只要设置列表前的标记就可以了
list-style-image将图像作为列表前的标记
list-style-position设置标记的位置取值:outside(默认)、inside
list-style简写

5.表格属性
border-collapse:表格中相邻的边框是否合并(折叠)为单一边框

取值:separated(默认) collapse

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table{
			width:500px;
			border:1px solid blue;
			border-collapse:collapse;
		}
		td{
			border:1px solid blue;
		}
	</style>
</head>
<body>
	<!-- table>(tr>td{td$}*5)*4 -->
	<table cellspacing="0px"cellpadding="0px">
		<tr>
			<td>bbb</td>
			<td>aaa</td>
			<td>aaa</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
		<tr>
			<td>aaa</td>
			<td>aaa</td>
			<td>bbb</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
		<tr>
			<td>td1</td>
			<td>td2</td>
			<td>td3</td>
			<td>td4</td>
			<td>td5</td>
		</tr>
	</table>
</body>
</html>
————————————————
版权声明:本文为CSDN博主「是叽叽呀」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43331963/article/details/106784229

在这里插入图片描述
在这里插入图片描述

五、盒子模型

简介

盒子模型(Box Model):所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

盒子模型包含内容:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容
在这里插入图片描述

各部分解释

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

1.边框样式(border)

表示盒子的边框分为四个方向:

  • 上top、右right、下bottom、左left
  • border-top、border-right、border-bottom、border-left

每个边框包含三种样式:

  • border-top-color、border-top-width、border-top-style
  • border-right-color、border-right-width、border-right-style
  • border-bottom-color、border-bottom-width、border-bottom-style
  • border-left-color、border-left-width、border-left-style

样式style的取值:

  • solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线

在这里插入图片描述

.rap{
		widtht 3O0Px:
		height: 300px;
		background: deepskyblue;
		border: 10px 801 id red;
		border-w1dth: 3px 5px 10px 1 5px:
		border-color:yellow blueviolet ;
		border-style:soild dotted daahed double;
		/*boder  :边框类型颜色
		border--width style color 复合样式
		border- width边框大小
		border-alyle so11d实线dashed虚线dolLed点线double双边框
		border-color颜色
		一个值的时候:代表四个方向值一样顺序为:,上右下左(顺时针方向)
		二个值的时候:上下右左
		三个值的时候:上 右左、下
		四个值的时候:上右、下左

		border-top- width:上 边框大小
		border-right-width:右边框大小
		border- bottom- width: 下边桩大小
		border-left- width:左边柜大小
		
		border-style 边框样式
		border-top-style顶部边框样式
		border- right-sty1e:右边框样式
		border-bottom-style:底部边框样式
		border- left-style:左边框样式
		
		border: 10px double eadd1 ebrown;
		border-tops 10px coubie salmon ;
		border-rights : 10px double salmon;
		border-bottom: 10px doub1e salmon;
		border-left : 10px double salmon; */
}
<div class=" rap">生活不能给你的甜,或许我可以。</div>

在这里插入图片描述
在这里插入图片描述

2.内边距样式(padding)

表示盒子的内边距,即内容与边框之间的距离

同样也分为四个方向,也可以简写(按顺时针方向,默认上下一样,左右一样)

注意:如果上下冲突,则以上为准,如果左右冲突,则以左为准
在这里插入图片描述

.rap{
		width: 300px;
		height: 300px;
		background: deepskyblue ;
		/* padding内边距:边框与 内容之间的距离
		一个值的时候:代表四个方向一样,上右 下左
		两个值的时候:上下右左
		三个值的时候:上右左下
		四个值的时候:上右下左
		*/
		padding: 50px;
		padding-top: 100px;
}
<div class=" rap">生活不能给你的甜,或许我可以。</div>

在这里插入图片描述
在这里插入图片描述

3.外边距样式(margin)

表示盒子的外边距,即盒子与盒子之间的距离

同样也分为四个方向,也可以简写(按顺时针方向,默认上下一样,左右一样)
在这里插入图片描述

*{
		/*在实际中最好都加上这个,去掉其本身的边距*/
		margin: 0 ,
		padding= 0 i
		}
.rap{
		width: 300px;
		height: 300px;
		background: deepskyblue;
		margin: 100px;
		overflow: hidden ;
		/*margin: auto; */ /*左右居中没有上下居中*/
		/* margin-left: auto; */ /*左居中*/
		/* margin-right: auto: */ /*右居中中*/
		/*margin外边距元素与其他元泰的距离(边框 以外的距离)
		一个值的时候:四个方向值一样,上 右下左(顺时针)
		两个值的时候:上下右左
		三个值的时候:上右左下
		四个值的时候:上右左“下
		auto快速左右居中
		垂直方向: margin-bottom, margin-top 取两者之间的较大值
		水平方向: margin-left. margin- right取两者的和
		overflow:    hidden;   解决内边距重叠问题。 超出隐藏,清除浮动
		*/
.		ov{
			width: 1 00px; 
			height: 1 00px;
			background: #FF0000;
			margin: 100px ;
		}

在这里插入图片描述
在这里插入图片描述

4.其他

页面中的元素实际所占的空间

  • 宽度=width+左右padding+左右border+左右margin
  • 高度=height+上下padding+上下border+上下margin

盒子属性默认值
不同标签的盒子属性默认值可能不同,需要自己设置

六、CSS浮动

1.简介

文档流
像水流,流动的是水,电磁流流动的是电磁。文档流流动的就是元素!
可以将屏幕中显示的内容都可以一一对应为文档中的一个元素.

CSS浮动
浮动,其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候,则需要脱离正常文档流。

CSS浮动优缺点

  • 优点:使元素脱离文档流,按照指定的(左右)方向移动,遇到父级边界或者相邻元素停下来。
  • 缺点:浮动会带来高度塌陷的问题。

2.浮动的实现

.rap{
	width:100px;
	height: 100px;
	background: aquamarine;
	float: left; /* float设置浮动, left为左浮动*/ 
}
.rap1 {
	width: 200px;
	height: 200px;
	background: blueviolet;
}
<div class="rap" >生活不能给你的甜,或许我可以。</div>
<div class="rap1">生活不能给你的甜, 或许我可以。</div>

在这里插入图片描述
上面的盒子还是会显示,但是没有在页面占据位置
在这里插入图片描述

3.浮动的清除

清除浮动的方式:

  1. 给父级增加高度(不推荐使用)
  2. 给父级加 overflow:hidden
  3. 添加一个空div
  4. 给父级加一个类:

.clearfix::after{
content: “”;
display: block;
clear: both;
}

.clearfix: :after{
	content :””;
	display: block;
	clear: both;
}
ul{
	width: 4 00px;
	/* height: 50px; */
	border: 2px solid darkgoldenrod;
	/* overflow: hidden; */ 
	}	
li{
	list-style: none;
	width: 60px;
	height: 50px;
	background: chartreuse;
	float: right ;
}
<!--uL> li{li$}*5 -- >
<ul class="clearf ix">
	<li>li2</li>
	<li>li3</li>
	<li>li4</li>
	<li>li5</li>
	<li>li6</li>
</ul>
<div class=" rap1">生活不能给你的甜,或许我可以。</div> 

在这里插入图片描述

在这里插入图片描述

4.浮动的应用

浮动的特点:

  • 脱离文档流
  • 按照指定的(左右)方向移动,遇到父级边界或者相邻元素停下来
  • 浮动会导致高度坍塌
  • 浮动元素不占空间
li{
	list-style:none ;
	width:60px;
	height: 50px;
	backg round: chartreuse;
	float: right;
	/*小圆圈*/
	margin: 5px;
	line-height: 50px;
	text-align:
	center;
	/*处理角度*/
	border-radius: 50% ;
}

在这里插入图片描述
在这里插入图片描述

七、CSS定位

1.简介

定位就是将元素定在网页中的任意位置。

取值含义作用
static静态定位(没有定位)默认
fixed固定定位相对于浏览器窗口进行定位方形词; left 、right、 top、 bottom
relative相对定位相对于正常位置(原来没定位之前的位置)进行定位,还要占据位置
absolute绝对定位没有占据位置,使元素完全脱离文档流; 没有定位父级,则相对整个文档发生偏移; 参考最近非static定位的父级进行定位

设置定位方式后,还要设置定位属性(偏移量):top、bottom、left、right

2.相对定位(relative)

先设置元素的position属性为relative,然后再设置偏移量

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        .rap{
        width: 200px;
        height: 200px;
        background: chocolate;
        /* relative 相对定位*/
        position: relative;
        left: 50px; */  /*只有定位之后才有整个属性,否则没有*/
        top: 300px; */
        margin: auto;
        margin: 50px;
        }
        .rap1 {
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>
<body>
<div class="rap">生活不能给你的甜,或许我可以。</div>
<div class="rap1">生活不能给你的甜,或许我可以。</div>
</div>
</body>
</html>

在这里插入图片描述
相对定位还是会占据原来的位置
在这里插入图片描述

3.绝对定位(absolute)

绝对定位类似于浮动,不会占据原来的位置
绝对定位,如果没有父级的话,是相对于整个文档定位,这里的父级定位和父级是两个概念。
如果有多个父级定位,会使用最近的那个定位

<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .rap{
        width: 200px;
        height: 200px;
        background: chocolate;
        /* relative 相对定位*/
        position: absolute;
        left: 100px;   /*只有定位之后才有整个属性,否则没有*/
        /*top: 300px; *!*/
        /*margin: auto;*/
        /*margin: 50px;*/
        }
        .rap1 {
            width: 300px;
            height: 300px;
            background: orange;
        }
    </style>
</head>

在这里插入图片描述
绝对定位类似于浮动,不会占据原来的位置
在这里插入图片描述

4.固定定位(fixed)

先设置元素的position属性为fixed,然后再设置偏移量

设置元素为固定定位后,元素会浮动在面面上方

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        .fixed{
        width: 399px;
        height: 999999999999px;
        background: chocolate;
        position: fixed;
        bottomf: 0;
        right: 0;
        }
    </style>
</head>
<body>
<div style="width:99px;height:10000000px;">
    <div class="fixed">生活不能给你的甜,或许我可以。</div>
</div>
</body>
</html>

在这里插入图片描述
相对于浏览器窗口进行定位方形词
在这里插入图片描述

5.层级(z-index)

设置元素定位方式后,元素会浮在页面上方,此时可以通过z-index属性设置优先级,控制元素的堆叠顺序

取值为数字,值越大优先级越高,默认为auto(大多数浏览器默认为0)

注意:只能给非static定位的元素设置z-index属性
当多个窗口在一起的时候会有覆盖,那么到底该显示那个,可以通过层级来控制,z-index 默认都是0,可以通过这个来控制优先级
在这里插入图片描述

八、重置样式(ResetCSS)

  • 浏览器在解析某些标签的时候,本身就自带了一些样式,导致我们写样式的时候就会效果不一致;
  • 公司里会根据每个公司的业务不同,会自己写一套属于自己公司的RESETCSS;
  • 我们可以使用别人提供的 ResetCSS 来去掉浏览器的样式,重新开始写自己的样式。

参考ResetCSS:https://meyerweb.com/eric/tools/css/reset/


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进