CSS学习笔记1

最新推荐文章于 2024-07-25 22:24:14 发布

maoza!

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量674

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_63438088/article/details/127242874

版权

CSS语法规范

<head>
	<style>
		 选择器{样式}
		 给谁改样式{改什么样式}
 	<style>
 </head>

<!D0OCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范</title>
    <!-- 给谁改样式{改什么样式} -->
    <!-- 选择器{样式} -->
    <style>
        p{
            color:red;
        }
    </style>
</head>
<body>
    <p>Hello大家好！我是一只大哈鱼</p>
</body>
</html>

代码风格

展开式
小写
空格

选择器的作用

选择器：选择标签

基础选择器

标签选择器
4种选择器

标签选择器

<style>
        p{
            color:red;
        }
</style>
<p>Hello大家好！我是一只大哈鱼</p>

类选择器

<style> .red{
 		background-color: red;
 }<style>
 <!--<div></div>是盒子的表示-->
<div class ="box red">红色</div>

id选择器

<style>
	#Bigfish {
		color:red;
}<style>

<div id="Bigfish">一只大哈鱼</div>

通配符选择器

<style>
<!-- 这里*把html body div span li 等等的标签都改为了红色 -->
      *{
            color: red;
        }
</style>

<body>
    <p>Hello大家好！我是一只大哈鱼</p>
    <div>红色</div>
</body>

在这里插入图片描述

字体设置

字体类型

font-family

<head>
	<style>
	p{
 		font-family: '微软雅黑','宋体';
	 }
 或
	body{
 		font-family: 'Microsoft YaHei';
 	}
 	</style>
 </head>

写多点，兼容性更好

字体粗细

font-weight

<style>
p{
	font-weight: 700; 
}
body{
	font-weight: 700;
}
</style>

文字样式

font-style: normal/italic;

<style>
p{
	font-style: italic;
body{
	font-style: italic
}
</style>

复合写法

body{
	<!--font: font-style font-weight font-size font-family;-->
	<!--不可随意更改顺序-->
	大小 和 样式 不能省略 ，其他可省
	font: italic 700 16px 宋体 ;
}

文本外观

颜色

<style>
div{
	color: pink; //第一种方式 英文
	color: rgb(255,0,255);//第二种方法
	color: #cc00ff; //第三种方法
}
</style>

文字对齐

<style>
h1{
	text-align: center / right /left;
}
</style>

装饰文字线

<style>
div{
	text-decorationL: underline; //下划线，链接<a>自带下划线
					  none; //默认，没有装饰线
					  overline;  //上划线
					  line-through; //删除线
}
</style>

缩进

<style>
p{
	text-indent: 20px; //段落首行缩进
}
</style>

行间距

<style>
p{
	line-height: 26px;
}
</style>

CSS三种样式表

style理论上可以放到任何地方

内部样式表

<head>
	<style>
	p{
		line-height: 26px;
	}
	</style>
</head>

行内样式表

<body>
	<p style="color: pink; ">Hello,大家好！我是大哈鱼！</p>
<body>

注意点：style的双引号""

外部样式表

实际开发
1.新建一个.css文件，把所有css代码放进里面，只有样式
2.html页面的中，写上标签代码，like:

<link rel ="stylesheet" href="css文件路径地址" >