CSS 入门教程六分之三篇

没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333

要点	解释
引用	如何使用定义的CSS样式方式
选择器	指明被定义样式的标签
属性	样式定义时具体定义的内容
定位	如何将标签放置到具体的位置（下篇）
盒模型	面试经典题（下篇）
显示	如何显示标签与标签布局（下篇）

引用

内联

开标签或自闭合标签的style属性上写明对应的CSS定义内容，即为内联方式引用，如下：

<div style='color: red;'>普通内容</div>

相关效果见：CodePen
内部标签

定义在head标签下的style标签内容，即为内部标签方式引用，如下：
```
<head><style>#head-style {color: green;}</style>
</head>
<body><div id='head-style'>普通内容</div>
</body>
```
相关效果见：CodePen
外部链接

定义在head标签下的link标签属性，即为外部链接方式引用，如下：

<link rel='stylesheet' href='anypath/any.css'>

any.css内容如下：
```
#out-link {color: blue;
}
```
对应适用标签如下：

<div id='out-link'>普通内容</div>

相关效果见：CodePen

以上为三种引用方法，不包括JS

选择器

id选择器

唯一性，原则上通篇文件有且仅有一个id名称，不可重复

任意标签的id属性，其属性值即为其唯一id，此id其他标签不可再用。

如：

<div id='first-id'>xxx</div>

CSS选择器表达式如下：
```
#first-id {}
```
表达式关键词：#
class选择器

任意标签的class属性，其属性值即为其class，此class与其他标签可共用，定义后所有同class标签一起生效。

如：

<div class='first-class'>xxx</div>

CSS选择器表达式如下：
```
.first-class {}
```
表达式关键词： .
标签选择器

任意标签的标签名本身就是其选择器，由于标签的可复用性，所以使用标签选择器即为对所有同标签生效。

CSS选择器表达式如下：
```
div {}
```
表达式关键词：无
伪类

伪类不算是选择器，但是因为独特，这里拎出来说一下

在选择器选中的基础上，对该标签的某种特性时段定义相关CSS属性，如hover（鼠标覆盖过程中），active（激活过程中）等等。

CSS选择器表达式如下：
```
div:hover {color: yellow;
}
```
相关效果见：CodePen

表达式关键词：:特性

属性

属性即CSS样式定制的具体样式，比如定制宽高，分别为width与height等。

相同的属性在不同的定位于显示中会有不同的表现，这里暂不表述过多，此处将属性大致分为四类，如下：

可继承属性

普通标签可能存在子标签的情况，因此在给一个普通标签定义可继承属性时候，若子标签未定义覆盖父级定义的属性，则继承父级属性的值，如font标签。

如存在如下代码关系：
```
<div class='father'>我是父级标签<div class='son'>我是子级标签<div class='grandson'>我是孙子标签</div></div>
</div>
```
定义CSS如下：
```
.father {color: purple;
}
```
相关效果见：CodePen

不可继承属性

不可继承性则比较好理解，就是只对自己生效。
如存在如下代码关系：

<div class='father'>我是父级标签<div class='son'>我是子级标签<div class='grandson'>我是孙子标签</div></div>
</div>

定义CSS如下：

.father1 {border: 1px solid red;
}

完整测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS快速入门</title><style>#id {color: red;}#testH2 {color: red;}.testClass1 {color: red;}/* 伪类 */.vir1 {color: green;}.vir1:hover {color: yellow;}/* h2 {color: red;} */</style><!-- ../ 上级目录(../../../../)    ./当前目录    /根目录 --><link rel="stylesheet" href="./index.css">
</head><body style='background: #eee'><h2 class="vir1">选择器(优先级排序)</h2><ol><li id='id'>id(标记)</li><li class='class'>class(类)</li><li class='vir'>:特性(伪类)</li><li>标签</li></ol><h2>属性</h2><pre>选择器 {属性A: 值A;属性B: 值B;}</pre><footer></footer>
</body>
</html>

感谢阅读，如果对你有任何帮助，深感荣幸。

如有问题，请留言。

如果觉得文章不错，还请关注一下，谢谢

CSS入门之引用、选择器、属性（六分之三）相关推荐

html css data-,HTML+CSS入门 HTML自定义data属性详解
本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 可以在HTML标签上添加任意以 "data-&q ...
CSS入门教程——HTML选择器
HTML 有标签(tags),而 CSS 有选择器(selectors). 选择器是样式的名字,只能定义在在内部和外部样式表(style sheets)中. 在 CSS 入门篇的专栏中,我们只会用到 ...
CSS入门、基本选择器和组合选择器
CSS的基本使用定义注释样式行内样式内部样式外部样式优先级 <head><meta charset="utf-8"><title> ...
CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性常用布局样式属性常用文本样式属性元素溢出显示特性盒子模型常用布局样式属性 <!DOCTYPE html> <html lang="en" ...
CSS入门学习笔记+案例(1)
CSS入门学习一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表是一组样式设置的规则,用于控制页面的外观样式 2.为什么使用CSS 实现内容与样式的分 ...
HTML555基础——css入门
网页文字的颜色.粗体.背景.行间距和左右两列的排版等,都是通过CSS控制的颜色属性: color:属性值;(注意分号) 背景属性:background:属性值: 浮动属性:float:属性值: 字 ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
第四章 JavaWeb CSS入门核心基础基础形式 + 选择器
谢罪:今天起晚了= =! 文章目录什么CSS? css样式规则 CSS核心基础行内式也称为内联样式内嵌式链入式导入式选择器标记选择器类选择器 id选择器通配符选择器什么CSS? C ...

CSS入门之引用、选择器、属性（六分之三）

CSS 入门教程六分之三篇

引用

选择器

属性

完整测试代码

CSS入门之引用、选择器、属性（六分之三）相关推荐

最新文章

热门文章