CSS的基本概念和语法规则
1.什么是css:
CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档(可以是标记语言HTML,也可以是XML或者SVN)的语言,可以将文档以更优雅的形式呈现给用户。
HTML和CSS之间的关系?
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 HTML就像是一个人,而CSS就像是衣服和化妆品,用来装饰HTML。
2.语法
2.1.CSS声明(CSS declarations)
CSS语言的核心功能就是为特定的属性设定特定的值,CSS引擎通过计算出声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都适用于同一个属性,不同的属性有一系列不同的值。
2.2.CSS声明块( CSS declaration blocks)
将多个CSS声明写在一起,每个CSS声明通过“;”分隔开,最后一个css声明无需使用“;”分隔开。使用“{ }”将多个CSS声明括起来,这样就构成了一个CSS声明块。
2.3.CSS规则集
选择器(Selector)HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素(在这个例子中就是 p 元素)。要给不同元素添加样式只需要更改选择器就行了。
声明(Declaration)一个单独的规则,如 color: red; 用来指定添加样式元素的属性。
属性(Properties)改变 HTML 元素样式的途径。(本例中 color 就是 <p> 元素的属性。)CSS 中,由编写人员决定修改哪个属性以改变规则。
属性的值(Property value)在属性的右边,冒号后面即属性的值,它从指定属性的众多外观中选择一个值(我们除了 red 之外还有很多属性值可以用于 color )。
注意其他重要的语法:每个规则集(除了选择器的部分)都应该包含在成对的大括号里({})。在每个声明里要用冒号(:)将属性与属性值分隔开。 在每个规则集里要用分号(;)将各个声明分隔开。
2.4.CSS可读性
空白( White space)
空白意味着实际空格、制表符和新行,可以添加空白使样式表更加可读。
注释( Comments)
/* 这里就是CSS的注释 */
速记写法( Shorthand)
类似于font,background, padding, border, margin 这些都被称为速记属性。
这些属性允许在一行中写多个属性值。速记属性可以节省时间,使代码整洁。
例如:
border:1px solid red;
定义和用法
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性:
- border-width
- border-style
- border-color
如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的。
默认值: | not specified |
---|---|
继承性: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.border="3px solid blue" |
可能的值
值 | 描述 |
---|---|
border-width | 规定边框的宽度。参阅:border-width 中可能的值。 |
border-style | 规定边框的样式。参阅:border-style 中可能的值。 |
border-color | 规定边框的颜色。参阅:border-color 中可能的值。 |
inherit | 规定应该从父元素继承 border 属性的设置。 |
定义和用法
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
例子 1
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
例子 2
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
例子 3
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
例子 4
border-style:dotted;
- 所有 4 个边框都是点状
background-color:red;
更加具体的可以去 W3school 网站仔细查看一下
padding: 10px 15px 15px 5px;等价于padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;
CSS的基本概念和语法规则相关推荐
- 一篇文章搞懂【Emmet】语法规则(前端必备技能)
前端人员编写网页代码时可以依靠一些编辑器的语法提示加快编写速度.大多数编辑器也提供emmet插件来更快的编写HTML和css代码.emmet的语法规则比较简单易理解可以极大的提高编码速度,基本上是前端 ...
- CSS - 语法规则
CSS - 语法规则 一.At-rule 一种以@开头的声明语句,以分号;结尾.语法规则为: @IDENTIFIER (RULE); . At-rule主要用作表示CSS的行为,参考: https:/ ...
- css的工作原理及使用规则
1. css定义 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.阶层式樣式表,一种用来为结构化文档(如HTML文档或 ...
- CSS的基本概念———每天一遍小知识
前言 这是我学习了这个网站整理的笔记,接下来还会持续更新. 这是我的博客首页:https://blog.csdn.net/weixin_46654114?t=1 博客名:RodmaChen 如果写的不 ...
- CSS的基本概念及文字属性、段落属性、背景属性、列表案例符号的样式
一. CSS的基本概念 1.CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观.指颜色 背景 大小元素定位. Css选择器:css选择器,也称为选择符,用于选择需要 ...
- XML(可扩展标记语言)的详细介绍 概念、语法与实例
前言 最近应导师要求,对交通领域的一篇协议性的文件进行学习,在协议的附录里,发现了一份对应这份协议的xml纲要,篇幅巨大,于是心中好奇xml究竟是什么,在这里做一简单记录,与大家共享. XML的概念 ...
- 面试题15:Dom树 CSS树 渲染树(render树) 规则、原理
面试官:请说一下Dom树 CSS树 渲染树(render树) 规则.原理 答: 首先你要了解浏览器渲染的顺序: 1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 ...
- LLVM一些语法规则
LLVM一些语法规则 LLVM文档 LLVM编译器基础架构支持广泛的项目,从工业强度编译器到专门的JIT应用程序,再到小型研究项目. 同样,文档分为几个针对不同受众的高级别分组: LLVM设计概述 几 ...
- C++ 基础概念、语法和易错点整理
目录 基础知识 构造函数与析构函数 虚函数 继承 单例模式 重载.隐藏和重写(覆盖) vector 扩容机制应注意的问题 STL 迭代器 前言 快秋招了,专门用一篇博客整理一下 C++ 的一些基础概念 ...
最新文章
- 关于虚拟化技术软硬件兼容问题的探讨
- Emscripten 单词_初一(上)掌握这 4 大类发音规律,英语记单词很轻松
- vector机器人 WHAT DO VECTOR‘S BACK LIGHTS MEAN? 矢量背光是什么意思?
- angular2.0学习日记1
- 【Java面试题】计算一个数字的立方根,不使用库函数
- python exception的传递
- LeetCode刷题(Python)——汉明距离
- Java基础知识强化53:经典排序之选择排序(SelectionSort)
- Shared Event-loop for Same-Origin Windows(译)
- ASP.NET MVC实践系列1-UrlRouting
- ext4 关闭延迟分配
- 运用反射时报错java.lang.NoSuchMethodException,以解决,记录一下
- ArcObjects操作PageLayoutControl中元素位置,以图框、ITextSymbol为例
- 英语语法笔记--定语从句及同位语从句
- 使用 Burp Suite 暴力破解密码 撞库攻击 从0到1手摸手教学
- win10如何合并硬盘分区
- c语言 字符串switch,C++中如何对字符串进行switch
- Flutter Dio的简易封装和demo
- 在Win7中将我的电脑快捷方式放入任务栏
- 给模型加入成交量控制