CSS回顾（基础知识，元素，选择器，盒子，颜色）

番茄西红柿发布于2019-04-23 13:15 / 3128人阅读

摘要：元素分类行级元素内联元素特征内容决定元素所占位置，不可以通过改变宽高块级元素特征独占一行，可以通过改变宽高行级块元素特征内容决定大小，可以改变宽高选择器类型通用的，没写那些伪类父子选择器派生选择器有父子关系的几个元素组成的选择器，下的所有

元素分类：

1.行级元素：内联元素 inline

特征：内容决定元素所占位置，不可以通过CSS改变宽高

span strong em a del

2.块级元素：block特征：独占一行，可以通过CSS改变宽高

div p ul li ol form address

3.行级块元素：inline-block

特征：内容决定大小，可以改变宽高

选择器类型（通用的，没写那些伪类）：

父子选择器（派生选择器）

div em {margin:0px} 有父子关系的几个元素组成的选择器，div下的所有em子孙

直接子元素选择器

div>em { margin:0 } 表示的是div下的直接子元素

并列选择器

div.red{ color:green } 表示并列关系

权重值比较：内联样式，1000

id :100 class:10 标签:1 *:0 ，!important是无穷大权重,但是如果!important+1则要更大

分组选择器

.demo{} .red{}

！！解决图片间隔 margin-left:-6px

盒子组成部分：

盒子壁 border

内边距 padding

盒子内容 width+weigth

margin+border+padding+content

颜色：

1.纯英文单词 red,green

2.颜色代码 #00ff22

3.颜色函数　　rgb(00,ff ,ff)

rgb()表示光的三原色，red, green ,blue

GPU云服务器云服务器基础选择器css 元素选择器 extjs颜色选择器 css选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1637.html

前端基础入门二（CSS）

摘要：输入的时候少按一个键浏览器兼容问题比如使用的选择器命名，在是无效的能良好区分变量命名变量命名是用不要纯数字中文等命名，尽量使用英文字母来表示。选择器和类选择器最大的不同在于使用次数上。当需要设置英文字体时，英文字体名必须位于中文字体名之前。回顾上一节HTML 思维导图 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

Lorry_Lu 2019-08-30 15:55 评论0 收藏0
[译]HTML&CSS Lesson4: 盒子模型

摘要：而内联元素会并排显示，宽度紧随内容变化而变化。但元素又按照内联元素显示，不会另起一行。这种情况下，只能指定非内联元素的属性值。如下是为非内联元素设置宽度的例子高度元素的默认高度取决于它的内容。现在我们已经熟悉了HTML和CSS。了解了它的基础。现在我们来更深入的了解元素在页面中的呈现和大小。在这节课中，我们将会讨论什么是盒子模型，它的工作模式是怎样的。我们也会在课程中学习一些新的C...

yzd 2019-08-01 17:21 评论0 收藏0
[译]HTML&CSS Lesson4: 盒子模型

摘要：而内联元素会并排显示，宽度紧随内容变化而变化。但元素又按照内联元素显示，不会另起一行。这种情况下，只能指定非内联元素的属性值。如下是为非内联元素设置宽度的例子高度元素的默认高度取决于它的内容。现在我们已经熟悉了HTML和CSS。了解了它的基础。现在我们来更深入的了解元素在页面中的呈现和大小。在这节课中，我们将会讨论什么是盒子模型，它的工作模式是怎样的。我们也会在课程中学习一些新的C...

developerworks 2019-08-29 13:04 评论0 收藏0
JavaWEB开发02——CSS&JS

摘要：今日目标使用完成网站首页的优化使用完成网站注册页面的优化使用完成简单的数据校验使用完成图片轮播效果教学目标了解的概念了解的引入方式了解的基本用法和常用的选择器了解的盒子模型，悬浮和定位了解的概念掌握的基本语法，数据类型，能够使用完成简单的页今日目标使用CSS完成网站首页的优化使用CSS完成网站注册页面的优化使用JS完成简单的数据校验使用JS完成图片轮播效果教学目标：了解...

MorePainMoreGain 2019-08-29 17:03 评论0 收藏0
JavaWEB开发02——CSS&JS

摘要：今日目标使用完成网站首页的优化使用完成网站注册页面的优化使用完成简单的数据校验使用完成图片轮播效果教学目标了解的概念了解的引入方式了解的基本用法和常用的选择器了解的盒子模型，悬浮和定位了解的概念掌握的基本语法，数据类型，能够使用完成简单的页今日目标使用CSS完成网站首页的优化使用CSS完成网站注册页面的优化使用JS完成简单的数据校验使用JS完成图片轮播效果教学目标：了解...

高胜山 2019-08-02 11:49 评论0 收藏0