CSS笔记（1）

最新推荐文章于 2024-08-07 22:35:34 发布

When ?

最新推荐文章于 2024-08-07 22:35:34 发布

阅读量108

点赞数 3

文章标签： css

本文链接：https://blog.csdn.net/mkijn/article/details/115247872

版权

本文详细介绍了CSS的基础知识，包括选择器的使用、字体属性、文本样式以及CSS的引入方式。通过实例展示了如何设置标签、类和ID选择器的样式，以及如何使用内联样式、内部样式表和外部样式表。还提到了Chrome调试工具的使用，帮助开发者更好地理解和应用CSS。

摘要由CSDN通过智能技术生成

html只能写一些简单的样式

CSS层叠样式表（Cascading Style Sheets）

选择器{具体样式（键值对）}
给谁该样式{改什么样式}

<head>
	<style>
		 p{
		    color:red;
		    font-size:12p;
		 }
	</style>
</head>

注意：加分号。

CSS代码风格

展开格式
样式小写
空格规范：1.属性值的前面，冒号后面保留一个空格。
2.选择器和花括号中间保留一个空格。

基础选择器

标签选择器

标签名称作为选择器

p {
    color: green;
}
div {
    color: pink;
}

类选择器

.类名 {

}
注意：不要用标签选择器的名字。

.red {
 color: red;
 }

<li class="red">红色</li>

类选择器-多类名

在标签class属性中可以写多个类名。
多个类名中间必须用空格分开。

.red {
 color: red;
 }
 .font35{
 font-size: 35px;
 }

<div class="red font35"></div>

id选择器

#pink {
color: pink
}

<div id="pink">粉色</div>

注：只能调用一次。

通配符选择器

便是选取页面中所有元素（标签）

* {
color: pink;
}

通配符选择器不需要调用，自动给所有元素使用样式。

CSS字体属性

字体

font-family: 'Microsoft Yahei',tahoma,arial;

有空格最好用引号包含起来。
各个字体之间用英文逗号隔开。
如浏览器中没有第一种字体便依次类推。

字体粗细

font-weight: bold
font-weight:700

这里不需要加px

前端总是伴随着困难与犯错，静心坦然攻克一个又一个，拼死也要克服它。

文字样式

font-style: normal;
font-style: italic;倾斜

字体复合属性

可以综合来写，节约代码

div {
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  font-family: 'Microsoft yahei';
}

复合后如下：

div {
  /*font-style font-weight font-size font-family*/
  /*顺序不能颠倒，各个属性之间空格隔开*/
  italic 700 16px 'Microsoft yahei'

注：不需要的属性可以省略，但是font-size和font-family不能省，否则font属性将不起作用。

文本属性

文本颜色

1.预定义的颜色值
2.十六进制
3.RGB代码

div{
color: deeppink;
color: #FFFFF；
color: rgb(255,0,255);
}

对齐文本

/*只能设置水平对齐*/
text-align: center;

文本装饰

上划线，下划线等。

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-throught;

可以用于去除链接的下划线。

a {
text-decoration: none;
}

文本缩进

使文本第一行的缩进指定距离。

p{
text-indent: 20px;
}

p{
text-indent: 2em;
}

em是一个相对单位，2em指当前元素两个文字的大小的距离。
如果当前元素没有设置大小，则会按父元素的一个文字大小。

行间距

line-height: 20px;

在这里插入图片描述

CSS引入方式

内部样式表(内嵌样式表)

<style>
div{
color: red;
}
</style>

行内样式表

<p style="color: pink; font-size: 20px">巴拉巴拉</p>

外部样式表（实际开发中使用）

样式写到.css文件中，之后吧css文件引入到HTML页面中使用。
在HTML页面中，使用标签引入这个文件。

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

Chrome调试工具

打开调试工具

按下F12键或者右击页面空白处->检查
左边是HTML结构，右边是CSS

When ?

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS笔记（1）

html只能写一些简单的样式CSS层叠样式表（Cascading Style Sheets）选择器{具体样式（键值对）}给谁该样式{改什么样式}<head> <style> p{ color:red; font-size:12p; } </style></head>注意：加分号。CSS代码风格展开格式样式小写空格规范：1.属性值的前面，冒号后面保留一个空格。2.选择器和花括号中间保留一个空格。基
复制链接

扫一扫