CSS基础理解(1)

简介: CSS基础理解(1)

CSS简介


HTML的局限性


(1)HTML 是网友的骨架,只关注内容的语义。例如<h1>表示大标题,<p>表示段落

(2)早期的时候,HTML 只能做一些简单的样式,网页非常丑,而且使 HTML 代码臃肿


CSS作用


(1)CSS 是 层叠样式表(Cascading Style Sheets)的简称

(2)CSS 也是一种标记语言

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

(4)HTML 呈现结构,CSS 决定样式,结构与样式分离


CSS语法规范


CSS 规则由两个部分组成:选择器和一条或多条声明


CSS代码风格


(1)展开式

(2)选择器,属性名,属性关键字全部小写

(3)空格规范


CSS基础选择器


选择器的作用


选择器就是根据不同需求把不同标签选择出来


选择器分类


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

(1)基础选择器由单个选择器组成

(2)基础选择器包括:标签选择器、类选择器、id 选择器和通配符选择器


标签选择器


(1)直接用 HTML 标签名作为选择器,按标签名称分类,为页面某一类标签指定统一的 CSS 样式。

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

优点

标签选择器可以把某一标签全部选择出来,快速为同类型标签设置统一样式

缺点

不能设置差异化样式,只能选择全部当前标签

类选择器

差异化选择不同标签,单独选一个或者某个标签

使用 class 属性来调用 class 类,样式点定义,结构类调用,一个或多个,开发最常用

类选择器用 . 号显示

(1)类选择器用 . 标识,紧跟类名

(2)小写,使用 - 连接单词

(3)不要用纯数字、中文

(4)命名有意义


类选择器——多类名


类名间用空格分开

<p class="class-name1 class-name2"></p>
复制代码


id选择器


id 选择器可以为标有特定 idHTML 元素指定特定的样式

HTML 元素以 id 属性来设置 id 选择器,用 # 来定义

#id名 {
    属性1: 属性值1;
    ...
}
复制代码

样式 # 定义,结构 id 调用,别人切勿使用

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

(1)选择器可以被多个元素调用

(2)id 选择器只能允许一个标签调用

(3)类选择器使用的较多,id 选择器用于唯一特性的标签


通配符选择器


* {
    属性1: 属性值1;
    ...
}Copy to clipboardErrorCopied

(1) * 定义通配符选择器,选取页面中所有标签。

(2)不需要调用,自动给所有标签。

(3)特殊情况使用

* {
    margin: 0;
    padding: 0;
}


基础选择器总结


基础选择器 作用 特点 使用情况 用法
标签选择器 选中所有相同标签 不能差异化选择 较多 p{color:red;}
类选择器 选出一个或多个标签 可以根据需求选择 较多 .nav {color: red;}
id 选择器 一次只能选出一个标签 一个 id 属性在页面中只能出现一次 一般配合 js 使用 #nav {color: red;}
通配符选择器 选择所有标签元素 选择的太多,有部分不需要 特殊情况使用 * {color: red; }

(1)每个选择器都有自己的使用场景,都要掌握

(2)如果是修改样式,类选择器是使用最多的

相关文章
|
前端开发
实验:CSS+Div基础 - 预习报告
网页设计技术实验预习报告。
195 1
实验:CSS+Div基础 - 预习报告
|
Web App开发 前端开发 Windows
CSS基础1 | 青训营笔记
本期作为复习CSS的笔记,比较基础。当然即便最基础的东西也欢迎各路高手指点,以防地基不稳大厦崩塌hhh
CSS基础1 | 青训营笔记
|
前端开发 JavaScript 容器
通俗重制系列--CSS基础
通俗重制系列--CSS基础
113 0
|
前端开发 JavaScript Java
计算机二级web题目(4)--CSS基础
计算机二级web题目(4)--CSS基础
132 1
|
前端开发
CSS基础之选择器
总所周知,css可以为网页设置多种多样的样式,那怎么样可以精确为每一个html标签设置相应的样式呢?
|
前端开发 人机交互
Web开发及人机交互导论 实验三 CSS+DIV基础
Web开发及人机交互导论 实验三 CSS+DIV基础
148 0
Web开发及人机交互导论 实验三 CSS+DIV基础
|
前端开发
CSS基础-塌陷及定位
clear:right; 右侧不允许有浮动元素
98 0
|
前端开发
CSS 基础(下)
CSS 基础(下)
64 0
CSS 基础(下)
|
前端开发 编译器 C++
CSS 基础(中)
CSS 基础(中)
97 0
CSS 基础(中)