前端入门 CSS笔记（一）

最新推荐文章于 2022-05-04 09:27:26 发布

一只蒻蒻

最新推荐文章于 2022-05-04 09:27:26 发布

阅读量121

点赞数

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

本文链接：https://blog.csdn.net/weixin_43786756/article/details/104820775

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目标：在这里插入图片描述

一、CSS简介

CSS的主要使用场景:美化网页，布局页面。

1、HTML的局限性

做结构，显示元素内容，只关注内容的语义，丑。

2、CSS-网页美容师

CSS即层叠样式表（Caacading Style Sheets）的简称。
不是编程语言！！是一种标记语言！
CSS主要用于HTML页面中文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

3、CSS的语法规范

CSS样式规则：
由两个主要部分构成：选择器以及一条或多条声明。
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范</title>
    <style>
        /* 选择器{样式} */
        /* 即：给谁改样式{改什么样式} */
        p {
            color:red;
             /* 修改字体大小 */
            font-size: 12px;
        }
    </style>
</head>

CSS写在head里面的style标签中
选择器用于指定CSS样式的HTML标签，或括号内是对该对象设置的具体样式
属性和属性值以键值对形式出现，属性和属性值以：分开。
每一组键值对后“;”来结尾。

4、CSS的代码风格

符合实际开发的书写方式。

（1）样式格式书写

1、紧凑格式。//堆在一行
2、展开格式。
推荐展开格式。

（2）样式大小写

全部使用小写字母，特殊情况除外。

（3）空格规范

在属性值前，冒号后，保留一个空格。
选择器（标签）和大括号中间保留一个空格。

二、CSS的基础选择器

1、CSS选择器的作用

根据不同需求选择标签。

2、选择器分类

选择器分为基础选择器和复合选择器。

（1）基础选择器

由单个选择器组成
包括：标签选择器、类选择器、Id选择器和通配符选择器。

①标签选择器

按HTML标签名称分类,把某一类标签全部选出来。

语法规范：

        标签名 {
            属性1: 属性值1;
            属性2: 属性值2;
            ......
        }

②类选择器

样式点定义，结构类调用，一个或多个，开发最常用。

单独选择一个或某几个标签，实现差异化选择。

语法规范：

.类名{
	属性1： 属性值1；
	......
}

例子：

	//类名为自定义名称，不能用标签名字。
	//比较长的词组可用“-”分隔
	//不要使用纯数字、中文命名，尽量使用英文字母。
    <style>
        .red {
            color: red;
        }
    </style>

	应用：
	<body>
    <p class="red">我是一个段落</p>
	</body>

多类名：给一个标签指定多个类名。
1、多类名使用方式：

//class属性中可写多个类名
//但中间必须用空格分开
<div class="red font20">啦啦啦</div>

2、多类名使用场景
（1）把相同样式放在一个类里，提取共性。
（2）标签调用公共类，再调用自己独有类。
（3）修改CSS代码方便

③Id选择器

样式#定义，结构Id调用，只能调用一次，别人切勿使用。
以id属性来设置选择器，CSS中id选择器以“#”来定义

语法规范：

#id名 {
	属性1： 属性值1；
	......
}

例子：

    <style>
        #pink {
            color: pink;
        }
    </style>

	<div id="pink">啦啦啦啦</div>

id选择器和类选择器的区别

类选择器可多人使用，类似名字。
id选择器只能使用一次。

④通配符选择器

使用*定义，选取页面中所有元素。

语法规范：

*{
	属性1： 属性值1；
	.....
}

通配符选择器不需要调用，自动给所有元素修改样式。
特殊情况才使用。

总结：
在这里插入图片描述

三、CSS字体属性

一只蒻蒻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门 CSS笔记（一）

目标：一、CSS简介CSS的主要使用场景:美化网页，布局页面。1、HTML的局限性做结构，显示元素内容，只关注内容的语义，丑。2、CSS-网页美容师CSS即层叠样式表（Caacading Style Sheets）的简称。不是编程语言！！是一种标记语言！CSS主要用于HTML页面中文本内容（字体、大小、对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。...
复制链接

扫一扫