CSS学习笔记1

最新推荐文章于 2024-07-25 15:44:34 发布

痴长几岁

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量82

点赞数 1

分类专栏：自己的一些学习笔记文章标签： css html html5

本文链接：https://blog.csdn.net/qq_50121370/article/details/120102455

版权

自己的一些学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

基本语法
在这里插入图片描述
键值对形式书写

<!DOCTYPE html>
<html lang="zh-CN">
<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">
    <style>
    	/*选择器{样式}*/
    	p {
    		color : red;
    		font-size : 12px;
    	}
    </style>
    <title>Document</title>
</head>
<body>
    <p>阿巴阿巴吧</p>
</body>
</html>

选择器

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="zh-CN">
<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">
    <style>
       /* 标签选择器 : 标签名 */
        p {
        color : rgb(255, 0, 0);
        font-size: 20px;
        }
        /* 类选择器 */
        .green {
            color: rgb(0, 255, 128);
        }
        .fz { 
            font-size: 16px;
        }
        #pink {
            color: pink;
        }
        /* 通配符选择器 * 选择所有 */
        * {
            font-weight: 200;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <p>阿巴阿巴吧</p>
    <p class="green">阿巴巴巴</p>
    <!-- 多类名的使用 -->
    <p class="green fz">abaabaa</p>
    <p id = "pink">abababa</p>
</body>
</html>

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出相同的标签	不能差异化选择	使用情况	p{color : red}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav{color :red}
id选择器	一次只能选择一个标签	ID属性只在HTML中出现一次	一般和js搭配	#nav{color：red}
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用	*{color :red}

CSS中的字体属性

属性名	样式	用法
font-family	字体	p{font-family:“微软雅黑”,‘Times New Roman’,Times} 依据使用者设备是否安装了该字体而递推使用，常用字体‘微软雅黑’，tahoma,arial
font-size	字体大小	p{font-size:20px}，标题标签需要特定指定大小
font-weight	字体粗细	p{font-weight:bold}参数 bold、bolder、lighter、100、200、30、、400、500、600、700、800、900
font-style	字体样式	p{font-style:normal} normal为默认风格 italic斜体风格

字体复合属性：
font:font-style font-weight font-size/line-height font-family
在这里插入图片描述
不需要设置的值可以省略，但font-size与font-style不能省略，否则font不能起作用。

CSS文本属性

1.文本颜色

color

div  {
	color : red;
}

2.文本对齐

text-align

h1 {
	text-align: center;
}

属性参数:left、center、right

3.装饰文本

text-decoration

div {
	text-decoration : underline;
}

属性值	描述
none	默认,没有装饰
underline	下划线
overline	上划线
line-through	删除线。(不常用)

4.文本缩进

text-indent
首行缩进

p{
	text-indent : 20px;
}

2em当前元素两个文字大小的距离

p{
	text-indent : 2em;
}

5.行间距

line-height

p{
	line-height:26px;
}

这里的26px包括了文本的高度

CSS的三种样式表

1.内部样式表写到html页面内部，是将所有的CSS代码抽取出来，单独放到< style>标签中。也叫嵌入式引入 2.行内样式表在元素标签内部的style属性中设定CSS样式

<div style="color : red; font-size: 12px;">
	楼上的电钻突突突
</div>

3.外部样式表
样式单独写在css文件中，之后把css文件引入到html页面中使用。
a.创建后缀名为css的文件，将所有的css代码放入其中
b.在html文件中使用< link>标签来引入css文件

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

痴长几岁

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记1

基本语法键值对形式书写<!DOCTYPE html><html lang="zh-CN"><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">
复制链接

扫一扫

专栏目录