首页 > 其他分享 >【CSS】从零开始学CSS第一篇:简介、基础选择器

【CSS】从零开始学CSS第一篇:简介、基础选择器

时间:2024-08-25 20:25:19浏览次数:10  
标签:从零开始 样式 标签 id HTML 选择器 CSS

目录

CSS 简介

1.1 HTML 的局限性

1.2 CSS-网页的美容师

1.3 CSS 语法规范

1.4 CSS 代码风格

1. 样式格式书写

2. 样式大小写

3. 空格规范

CSS 基础选择器

2.1 CSS 选择器的作用

2.2 选择器分类

2.3 标签选择器

2.4类选择器

类选择器-多类名

2.5 id 选择器

2.7 基础选择器总结


CSS 简介


CSS 的主要使用场景就是美化网页,布局页面的。

1.1 HTML 的局限性

说起 HTML,这其实是个非常单纯的家伙,他 只关注内容的语义 。比如 <h1> 表明这是一个大标题,<p> 表明这是一个段落,<img> 表明这儿有一个图片,<a> 表示此处有链接。 很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑 。 虽然 HTML 可以做简单的样式,但是带来的是无尽的 臃肿和繁琐 ……

1.2 CSS-网页的美容师

CSS 是 层叠样式表 ( Cascading Style Sheets ) 的简称。 有时我们也会称之为 CSS 样式表 或 级联样式表 。 CSS 也是一种标记语言 CSS 主要用于设置 HTML 页面中的 文本内容 (字体、大小、对齐方式等)、 图片的外形 (宽高、边框样式、 边距等)以及 版面的布局和外观显示样式 。 CSS 让我们的网页更加丰富多彩,布局更加灵活自如。简单理解: CSS 可以美化 HTML , 让 HTML 更漂亮,让页面布局更简单 。
总结: 1. HTML 主要做结构,显示元素内容. 2. CSS 美化 HTML,布局网页. 3. CSS 最大价值:由 HTML 专注去做结构呈现,样式交给 CSS,即结构 ( HTML ) 与样式( CSS ) 相分离。

1.3 CSS 语法规范

使用 HTML 时,需要遵从一定的规范,CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰,首先需要了解CSS 样式规则。
CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。
  • 选择器是用于指定 CSS 样式的 HTML 标签,花括号内是对该对象设置的具体样式
  • 属性和属性值以 “键值对” 的形式出现
  • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
  • 属性和属性值之间用英文 “:” 分开
  • 多个“键值对”之间用英文 “;” 进行区分
所有的样式,都包含在 <style> 标签内,表示是样式表。<style> 一般写到 <head> 里面。
<head>
    <style>
        h4 {
            color: blue;
            font-size: 100px;
        }
    </style>
</head>

1.4 CSS 代码风格

1. 样式格式书写

① 紧凑格式
h3 { color: deeppink;font-size: 20px;}
② 展开格式
h3 {
    color: pink;
    font-size: 20px; 
}

 强烈推荐第二种格式, 因为更直观。

2. 样式大小写

h3 {
    color: pink;
}
H3 {
    COLOR: PINK; 
}

 强烈推荐样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。

3. 空格规范

h3 {
    color: pink; 
}
① 属性值前面,冒号后面,保留一个空格 ② 选择器(标签)和大括号中间保留空格

CSS 基础选择器


2.1 CSS 选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。

2.2 选择器分类

选择器 分为 基础选择器 和 复合选择器 两个大类,我们这里先讲解一下基础选择器。
  • 基础选择器是由单个选择器组成的。
  • 基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器。

2.3 标签选择器

标签选择器 (元素选择器) 是 指用 HTML 标签名称 作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。 语法
标签名{
    属性1: 属性值1; 
    属性2: 属性值2; 
    属性3: 属性值3; 
    ...
}
作用 标签选择器可以把某一类标签全部选择出来,比如所有的 <div> 标签和所有的 <span> 标签。 优点 能快速为页面中同类型的标签统一设置样式。 缺点 不能设计差异化样式,只能选择全部的当前标签。

2.4类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用 类选择器 . 类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。
语法
.类名 {
    属性1: 属性值1; 
    ...
}

例如,将所有拥有 red 类的 HTML 元素均为红色。

.red {
    color: red;
}

 调用

结构需要用class属性来调用 class 类的意思

<div class=‘red’> 变红色 </div>
注意 ① 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。 ② 可以理解为给这个标签起了一个名字,来表示。 ③ 长名称或词组可以使用中横线来为选择器命名。 ④ 不要使用纯数字、中文等命名,尽量使用英文字母来表示。 ⑤ 命名要有意义,尽量使别人一眼就知道这个类名的目的。 ⑥ 命名规范:见附件( Web 前端开发规范手册.doc) 记忆口诀: 样式 点 定义,结构 类 调用。一个或多个,开发最常用。

类选择器-多类名

我们可以给一个标签指定 多个类名, 从而达到更多的选择目的,这些类名都可以选出这个标签。 简单理解就是一个标签有多个名字。

1. 多类名使用方式 

<div class="red font20">亚瑟</div>
(1) 在标签class 属性中写 多个类名 (2) 多个类名中间必须用空格分开 (3) 这个标签就可以分别具有这些类名的样式 2.多类名开发中使用场景 (1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面. (2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类. (3) 从而节省CSS代码,统一修改也非常方便.
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
  • 各个类名中间用空格隔开
  • 简单理解:就是给某个标签添加了多个类,或者这个标签有多个名字
  • 这个标签就可以分别具有这些类名的样式
  • 从而节省CSS代码,统一修改也非常方便.
  • 多类名选择器在后期布局比较复杂的情况下,还是较多使用的

2.5 id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML 元素以 id 属性 来设置 id 选择器,CSS 中 id 选择器以“ # " 来定义。 语法
#id名 {
    属性1: 属性值1; 
    ...
}
例如,将 id 为 nav 元素中的内容设置为红色。
#nav {
    color:red;
}

 注意:id 属性只能在每个 HTML 文档中出现一次。

口诀: 样式#定义,结构id调用,只能调用一次,别人切勿使用。

id 选择器和类选择器的区别 ① 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。 ② id 选择器好比人的身份证号码,全中国是唯一的,不得重复。 ③ id 选择器和类选择器最大的不同在于使用次数上。 ④ 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。 2.6 通配符选择器 在 CSS 中,通配符选择器使用“ * ”定义,它表示选取页面中所有元素(标签)。 语法
* {
    属性1: 属性值1;
    ...
}
  • 通配符选择器不需要调用, 自动就给所有的元素使用样式
  • 特殊情况才使用,后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
* {
    margin: 0;
    padding: 0;
}

2.7 基础选择器总结

基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p{color: red;}
类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav{color: red;}
id选择器一次只能选择一个标签ID属性只能在每个HTML文档中出现一次一般和js搭配#nav{color: red;}
通配符选择器选择所有的标签选择的太多,有部分不需要特殊情况使用*{color: red;}
  • 每个基础选择器都有使用场景,都需要掌握
  • 如果是修改样式,类选择器是使用最多的

标签:从零开始,样式,标签,id,HTML,选择器,CSS
From: https://blog.csdn.net/isun1/article/details/141528914

相关文章

  • 从零开始学习C++之枚举与模拟
    枚举和模拟是C++中最为基础的算法,也是之后赛时部分分的算法首选。枚举顾名思义,枚举就是将所有值全部扫一遍。枚举算法的流程图如下:我们很容易就可以写出伪代码:for(枚举区间){ 代码,例: if(条件) { 输出 }}模拟模拟就是将做的事情通过程序一步步完成,有时候很简......
  • Web大学生网页作业成品——电影泰坦尼克号介绍网页设计与实现(HTML+CSS)(4个页面)
    ......
  • HTML静态网页成品作业(HTML+CSS)——游戏战地介绍设计制作(4个页面)
    ......
  • 前端必知必会-CSS 属性选择器
    文章目录CSS属性选择器CSS[attribute]选择器CSS[attribute="value"]选择器CSS[attribute~="value"]选择器CSS[attribute|="value"]选择器CSS[attribute^="value"]选择器CSS[attribute$="value"]选择器CSS[attribute*="value"......
  • 前端必知必会-CSS 图片库和图像精灵
    文章目录CSS图片库CSS图像精灵图像精灵-简单示例图像精灵-创建导航列表图像精灵-悬停效果总结CSS图片库CSS可用于创建图片库。以下图片库使用CSS创建:示例<html><head><style>div.gallery{margin:5px;border:1pxsolid#ccc;float:left;......
  • CSS属性background-position-y实现动画
    CSS属性background-position-y实现动画引言background-position-y属性用于设置初始状态时背景图片在垂直方向的位置,这个位置相对于通过background-origin定义的背景层原点进行定位,详见MDN文档。今天要分享的是如何利用background-position-y属性实现简单的动画,源图是静......
  • 前端速通面经八股系列(一)—— CSS篇
    CSS高频面经目录一、CSS基础1.CSS选择器及其优先级2.CSS中可继承与不可继承属性有哪些3.display的属性值及其作用4.display的block、inline和inline-block的区别5.隐藏元素的方法有哪些6.link和@import的区别7.transition和animation的区别8.display:none与visi......
  • 【html+css 绚丽Loading】000016 四维玄方
    前言:哈喽,大家好,今天给大家分享html+css绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • CSS属性
    一、CSS列表样式1、list-style-type属性(列表项标记)CSS列表属性允许我们设置不同的列表项标记。 在HTML中,有​两种类型​的列表:​无序列表​(<ul>) - 列表项目用​项目符号​标记​有序列表​(<ol>) - 列表项目用​数字​或​字母​标记使用CSS,列表可以进一步风格化,图像可......
  • 从零开始学习C++之结构体
    前言之前讲过变量,讲了数据类型(如int等),而结构体就相当于创造一个类型。定义结构体首先,写上一个神圣不可侵犯的(bushi)struct。好了,不开玩笑了。在程序外围定义(一般写在命名空间后面)。struct名字{ 含有的东西。};一定一定要有分号!!!例:定义存储坐标的结构体structzuo......