首页 > 其他分享> 文章详细

2021-11-02 学习CSS第一天

2021-11-02 20:59:56 阅读：112 来源： 互联网

标签：11 02 样式标签 2021 2.1 选择器 CSS 属性

1.CSS简介

1.1 HTML的局限性

只能将网页元素显示出来，并不能修改外观样式，就是丑。

1.2 CSS-网页的美容师

CSS是层叠样式表**(Cascading Style Sheets)**的简称，也称之为CSS样式表和级联样式表。

CSS和HTML一样，也是一种标记语言。

CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形以及版面的布局和外观显示样式。

CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

总结
1.HTML主要做结构，显示元素内容；

2.CSS美化HTML，布局页面；

3.CSS的最大价值：由HTML专注去做结构呈现，样式交给CSS,即结构与样式相分离。

1.3 CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明。

**选择器**：选择给谁修改样式；
**声明**：要改成什么样。
例如：h1 {color:red;
         font-size:12px;}

1.属性和属性值是以键值对的形式出现；

2.属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等；

3.属性和属性值之间用英文":"冒号隔开；

4.选择器和声明是写在head标签中的。

<!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">
    <title>体验CSS语法规范</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        p {
            color: red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

1.4 CSS代码风格

1.4.1 样式格式书写

1.紧凑格式

h3 {color：deeppink；font-size：20px；}

2.展开格式（更提倡）

h3 {
color：deeppink；
font-size：20px；
}

1.4.2 样式大小写

除特殊情况外，属性名，属性值关键字全部使用小写字母。

1.4.3 空格规范

1.属性值前面，冒号后面，保留一个空格；

2.选择器和大括号之间保留一个空格。

2.CSS基础选择器

作用：根据不同的需求把不同的标签选出来。

分类：选择器分为基础选择器和复合选择器两大类。

2.1 基础选择器

1.基础选择器是由单个选择器组成的；

2.基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器。

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出html中所有相同的标签，比如P	不能差异化选择	较多	p {color: red;}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav {color: red font35;}
id选择器	一次只能选择一个标签	id属性在每个html文档中只能出现一次	一般和js搭配使用	#nav {color: red}
通配符选择器	选择所有的标签	不能差异化选择	特殊情况使用	* {color: red;}

2.1.1 标签选择器

作用：将某一类标签全部选择出来，比如所有的div标签和所有的span标签。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

2.1.2 类选择器（开发中最常用）

作用：差异化选择不同的标签，单独选一个或某几个标签。

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

例如，将所有red类的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">
    <title>类选择器</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">冰雨</li>
        <li>半生缘</li>
        <li>李香兰</li>
        <li>生僻字</li>
        <li>江南sytle</li>
    </ul>
</body>
</html>

在style标签中定义了一个类red，在body标签里调用这个类，有点类似函数调用。

注意
1.一定要注意类名前面有一个小黑点；

2.类名是我们可以随便定义的，除了标签名（那就变成标签选择器了），什么名字都可以；

3.类名很长时可以用短横杠来隔开；

4.不要出现纯数字、中文等命名，尽量使用英文字母来表示。

2.1.2.1 多类名

作用：给一个标签指定多个类名，从而达到更多的选择目的。

语法

形如
<div class="red font20">亚瑟</div>

注意
1.多个类名之间必须用空格分开；

2.1.3 id选择器

语法

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

id选择器和类选择器的区别
1.类选择器就像人的名字，一个人可以有多个名字，一个名字也可以被多个人使用；

2.id选择器就像人的身份证号码，是唯一，不能重复使用的。

2.1.4 通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中的所有元素。

语法

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

注意
1.通配符选择器不需要调用，自动就给所有的元素使用样式；

2.特殊情况才会使用。

标签：11,02,样式,标签,2021,2.1,选择器,CSS,属性
来源： https://blog.csdn.net/qq_42727908/article/details/121099526

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9