CSS 的基础语法
1、基础语法规则
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
(1)选择器的分组
你可以对选择器进行分组,这样被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是红色的。
(2)继承
根据 CSS,子元素从父元素继承属性。子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示绿色,子元素的子元素也一样。
2、CSS 基础选择器
2.1 派生选择器
通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁,列表中的 strong 元素变为红色,而不是通常的黑色,
2.2 id 选择器
1.id 选择器:
id 选择器可以为标有 id 的 HTML 元素指定特定的样式
id 选择器以“#”来定义---一个id在文档中只出现一次
就是 用于建立派生选择器,相当于是一个嵌套。#divid{}
就是一个独立的 id 选择器,#pid a{}
2.3 类选择器
(1)在 CSS 中,类选择器以一个点号显示:
注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
2.4 属性选择器
三、 CSS 背景
1、 css 样式-文本
p.uppercase {text-transform: uppercase} 大写
p.lowercase {text-transform: lowercase}小写
p.capitalize {text-transform: capitalize}首字母大写
cursor:pointer;一些不同的光标
text-decoration 属性:去掉链接的下划线
2、 CSS 链接
a:link --普通的、未被访问的链接
a:visited --用户已访问的链接
a:hover --鼠标指针位于链接的上方
a:active --链接被点击的时刻
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
3、 列表类型
1、 列表项图片
4、 CSS 表格
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法。
四、CSS 盒子模型
我们先来看看盒子的组成包括:
margin(外边距);border(边框);padding(内边距);content(内容)
4、CSS 定位
CSS 有三种基本的定位机制:
普通流:
元素按照其在 HTML 中的位置顺序决定排布的过程
浮动:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
绝对定位:
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
定位属性:
position,将元素放在一个静态的,相对的,绝对的,或固定的位置:
fixed,和 static
/*position: relative;*/
position: absolute;/*不占用空间位置*/
通过对 top,left,right,bottom 这四个属性的赋值让元素向对应的方向偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素的显示形状,多用于图片
vertical-align 设置元素的垂直对其方式
z-index 设置元素的堆叠顺序
CSS 浮动
left:元素向左浮动
right:元素向右浮动
none:不浮动
inherit:从父级继承浮动的属性
还有一个就 clear 属性:
主要用于去掉向各方向的浮动属性(包括继承来的属性)
CSS 的基础语法的更多相关文章
- 第二部分----CSS的基础语法
PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...
- HTML——CSS的基础语法1
页面中所有CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择text/css,但是type属性可以省略. 1.CSS常用选择器 ...
- HTML——CSS的基础语法2
一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...
- [JavaWeb基础] 028.CSS简介和基础语法
css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- CSS 入门基础
一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...
- CSS基础语法与选择器
CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...
- CSS基础语法(一)
目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...
- emmet 系列(1)基础语法
emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...
- 前端学PHP之基础语法
× 目录 [1]代码标识 [2]注释 [3]输出 [4]计算表达式 [5]大小写 [6]空白符 前面的话 PHP是一种创建动态交互性站点的强有力的服务器端脚本语言.PHP能够包含文本.HTML.CSS ...
随机推荐
- linux 下启动tomcat 时没有执行权限
原因: 没有权限 解决 : chmod 777 *.sh Linux下启动tomcat
- 2018-2019-2 网络对抗技术 20165206 Exp 8 Web基础
- 2018-2019-2 网络对抗技术 20165206 Exp 8 Web基础 - 实验任务 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GE ...
- windows10 cortana 不能搜索解决办法
不太确定是某次系统更新或安装VS软件之后, 发现windows10 cortana 搜索的结果是空白了, 搜索了相关帖子, 试遍所有方法都无效, 最后在联网的情况下, 只用了在powershell中重 ...
- error C2664: “ATL::CStringT<BaseType,StringTraits>::Remove”: 不能将参数 1 从“const char [2]”转换为“char”
转自VC错误:http://www.vcerror.com/?p=1395 问题描述: 代码: CString str("asdfafda"); str.Remove(" ...
- python字符串常用函数-大小写,删除空格,字符串切片
- Linux操作系统(二)_快速入门
环境 安装VM ware,输入VM key 在VM上安装CentOS 6.5 设置网络,能在本机上ping通 通过终端连接工具:Xshell或SecureCRT,连接Linux服务器 实操可能出现的问 ...
- CPU的架构:x86、arm、mips、龙芯等
在公司经常听其他工程师讲x86,arm平台啥的,作为一个算法工程师,我听过却不知道这是啥!!!(汗颜) 现在偷偷学起: x86,arm,mips等这些都是CPU的架构,不管是手机电脑还是一些嵌入式的设 ...
- MFC绘图基础
·MFC中三种坐标系统: 1.屏幕坐标系 坐标原点位于屏幕左上角 2.(非客户区)窗口坐标系 坐标原点位于窗口左上角(包括标题栏) 3.客户区坐标系 坐标原点位于客户区左上角(不包括标题栏) ·坐标系 ...
- python面试题之迭代器和生成器的区别
1 迭代器是一个更抽象的概念,任何对象,如果它的类有next方法和iter方法返回自己本身.对于string.list.dict.tuple等这类容器对象,使用for循环遍历是很方便的.在后台for语 ...
- Mybatis一级缓存和二级缓存 Redis缓存
一级缓存 Mybatis的一级缓存存放在SqlSession的生命周期,在同一个SqlSession中查询时,Mybatis会把执行的方法和参数通过算法生成缓存的键值,将键值和查询结果存入一个Map对 ...