CSS学习记录

最新推荐文章于 2022-10-01 21:58:01 发布

程序员爱何

最新推荐文章于 2022-10-01 21:58:01 发布

阅读量86

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_45545764/article/details/118896708

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基本入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		语法：
			选择器{
				声明1：
				声明2：
				声明3：
			}
		<!--<style>可以编写css的代码-->
		<style>
			h1{
				color:red
			}
		</style>
	</head>
	<body>
		
	<h1>我是标题</h1>
	
	
	</body>
</html>

一、css的三种导入方式

1.外部样式

新建一个css文件
在通过link href引入

<link rel="stylesheet" href="css/H1.css">

2.行内样式

		<!-- 行内样式：在标签元素中编写一个style元素 -->
	<h1 style="color: #FF0000;">我是标题</h1>

3.内部样式

		<!-- 内部样式 -->
		<style>
			h1{
				color: aqua;
			}
		</style>

优先级就近原则那个样式离得近就用谁的样式

二、选择器

1.基本选择器

/标签选择器,会选择到页面上所有的这个标签的/

		<style>
		/*标签选择器,会选择到页面上所有的这个标签的*/
			h1{
				color: aqua;
			}
		</style>

2.类选择器

**.类名{}**即为类选择器

		<style>
			.lyj{
				color: aqua;
			}
		</style>
	<h1 class="lyj">java</h1>
	<h1>python</h1>

3.Id选择器

#id名{}

		<style>
		#hls{
			color: azure;
		}
		</style>
		<h1 class="lyj" id="hls">java</h1>

4.层次选择器

层次后代选择器

5.结构伪类xuanzq

ul+li：first-child{}

			ul li:first-child{
				background-color: antiquewhite;
			}
			ul li:last-child{
				background-color: aqua;
			}

选中当前第一个元素作为父级元素在往后面推送
nth-child(第几个）

			p:nth-child(1){
				background-color: #FF0000;
			}
						p:nth-of-type(1)
			{
				background-color: #FAEBD7;
			}

6.属性选择器

注意：优先级不是就近原则 id选择器>class选择器>标签选择器 display：none 就可以去掉东西

三、属性

CSS属性详解点击获取

			.demo a{
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				background-color: #FF0000;
				text-align: center;
				color: aqua;
				text-decoration: none;/*去除下划线*/
				margin-right: 10px;/*元素向右移*/
				font:bold 20px/50px arial;/*居中*/
			}

1.字体及样式

1.span标签：重点突出的字用span标签，用span标签套起来

		<style>
		#tit{
			font-size: 50px;
		}
		
		</style>
	</head>
	<body>
		学习<span id="tit">java</span>
	</body>

2.字体样式

font-family:
在这里插入图片描述
font-size：字体大小

font-weight ：字体粗细

2.文本样式

1.颜色

			color:

2.文本对齐方式

		text-align:位置排版

3.首行缩进

	text-indent 首行往里缩

4.行高

line-height 行高

5.装饰

text-decoration:underline下划线

text-decoration:line-through中划线

text-decoration:overline 上划线

vertica-align:middle图片文字水平对齐

四、盒子模型

1.什么是盒子

在这里插入图片描述

margin：外边距

一个元素到最外边的距离
margin：0 auto auto：左右自动对齐
在这里插入图片描述

padding：内边距

padding: 上下左右
在这里插入图片描述

2.圆角边框

border-radius： 50px

只加了border
在这里插入图片描述
加了border-radius
border-radius ：左上右上右下左下
也可以改图片

在这里插入图片描述

border：边框

可以给一个样式加边框
1.边框的粗细
2.样式
3.颜色

		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin: 0 auto;
			}
			#box{
				width: 300px;
				border: 1px solid black;
			}
			form{
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h2>会员登录</h2>
			<form>
				<div>
					<span>用户名</span>
					<input type="text" />
				</div>
				<div>
					<span>密码</span>
					<input type="text" />
				</div>
			</form>
		</div>
	</body>

box-shadow盒子阴影

可以让边框拥有阴影发光
在这里插入图片描述

五、超链接和伪类

text-decoration: none;去除下划线
hover 悬浮时 active 按住未释放时

		/*默认的颜色*/
			a{
				text-decoration: none;
				font-size: 50px;
				color: #00FFFF;
			}
			/*鼠标悬浮的颜色*/
			a:hover{
				color:blue;
				font-size: 10px;/*悬浮时可以变大*/
			}
			/*鼠标按住未释放的颜色*/
			a:active{
				color: greenyellow;
			}

文字阴影

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

在这里插入图片描述

六、display和浮动

浮动

在这里插入图片描述

块级元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong。。。。。
行内元素可以包含在块级元素中，反之，则不可以

display：block 可以把元素变成块级元素
inline-block 变成一行块级元素可以内联

display ： none 直接让元素变没了

程序员爱何

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录