css学习日记

最新推荐文章于 2023-03-25 21:27:38 发布

qq_53589524

最新推荐文章于 2023-03-25 21:27:38 发布

阅读量215

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_53589524/article/details/124439388

版权

css学习日记

文章目录

css学习日记

css语法规范

构成：选择器+声明

h1{
 	list-style:none;
}

选择器

1.标签选择器：选择所有标签

2.类选择器：//标签名字不能做类名

.bkground_top{
    color: red;
}

<p class = "bkground_top">
	妈耶
</p>

常用类命名规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HG986Pzt-1650984552825)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20220426211648732.png)]

多类名

一个标签内多个类名

<style>
.nav{
	font-size: 10px;
}
.color{
    color: red;
}
</style>
<body>
	<div class = "nav color"> zeze </div>
</body>

id选择器

“#”+选择器名

!!!只能调用一次!!! 一般与JavaScript结合使用

#name1{
	color: pink;
}

<p id = "name1"> lili </p>

*通配符选择器

“*”+选择器名

选择页面内所有元素

* {
	margin:0;
	padding:0;
}    /* 通配符 删除浏览器默认值 */

一些属性

.content{
    width: 100px;
    height: 100px;
    background-color: red; //背景颜色
}

字体属性

.main{
    font-family: "微软雅黑";//宋体、黑体、隶书、楷体
	font-size: 20px;// 文字大小
    font-weight: bold/normal; // 字体粗细
    font-style: italic; // 设置字体样式 ，此处为倾斜
}
//

颜色属性

.color{
    color:red; // 预定义（测试）
    #FF0000; //16进制（常用）
    rgb(255,255,255);
}

文本属性

div{
    text-align: center/left/right;//居中左右对齐
    text-decoration:none/underline/overline/line-through // 无/下划线/上划线/删除线
    /*em 为相对单位 */
    text-indent:20px/2em(常用--当前两个文字距离); //首行缩进
    text-height:26px; // 行与行间的距离(包含上下间距)
}

css引入方式

1.行内样式表: 标签内部写

<p style = "color: red; font-size: 12px">
    ljj
</p>

2.内部样式表:将css代码放入

3.外部样式表

<link href = "路径" rel = "stylesheet" type = "text/css">

; font-size: 12px">
ljj

```

2.内部样式表:将css代码放入

3.外部样式表

<link href = "路径" rel = "stylesheet" type = "text/css">

qq_53589524

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习日记

css学习day1
复制链接

扫一扫

css学习日记

css学习日记

文章目录

css语法规范

选择器

多类名

id选择器

*通配符选择器

一些属性

字体属性

颜色属性

文本属性

css引入方式

“相关推荐”对你有帮助么？