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 的基础语法的更多相关文章

  1. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  2. HTML——CSS的基础语法1

    页面中所有CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择text/css,但是type属性可以省略. 1.CSS常用选择器 ...

  3. HTML——CSS的基础语法2

    一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...

  4. [JavaWeb基础] 028.CSS简介和基础语法

    css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  5. CSS 入门基础

    一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...

  6. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  7. CSS基础语法(一)

    目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...

  8. emmet 系列(1)基础语法

    emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...

  9. 前端学PHP之基础语法

    × 目录 [1]代码标识 [2]注释 [3]输出 [4]计算表达式 [5]大小写 [6]空白符 前面的话 PHP是一种创建动态交互性站点的强有力的服务器端脚本语言.PHP能够包含文本.HTML.CSS ...

随机推荐

  1. linux 下启动tomcat 时没有执行权限

    原因: 没有权限 解决 : chmod 777 *.sh Linux下启动tomcat

  2. 2018-2019-2 网络对抗技术 20165206 Exp 8 Web基础

    - 2018-2019-2 网络对抗技术 20165206 Exp 8 Web基础 - 实验任务 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GE ...

  3. windows10 cortana 不能搜索解决办法

    不太确定是某次系统更新或安装VS软件之后, 发现windows10 cortana 搜索的结果是空白了, 搜索了相关帖子, 试遍所有方法都无效, 最后在联网的情况下, 只用了在powershell中重 ...

  4. error C2664: “ATL::CStringT<BaseType,StringTraits>::Remove”: 不能将参数 1 从“const char [2]”转换为“char”

    转自VC错误:http://www.vcerror.com/?p=1395 问题描述: 代码: CString str("asdfafda"); str.Remove(" ...

  5. python字符串常用函数-大小写,删除空格,字符串切片

  6. Linux操作系统(二)_快速入门

    环境 安装VM ware,输入VM key 在VM上安装CentOS 6.5 设置网络,能在本机上ping通 通过终端连接工具:Xshell或SecureCRT,连接Linux服务器 实操可能出现的问 ...

  7. CPU的架构:x86、arm、mips、龙芯等

    在公司经常听其他工程师讲x86,arm平台啥的,作为一个算法工程师,我听过却不知道这是啥!!!(汗颜) 现在偷偷学起: x86,arm,mips等这些都是CPU的架构,不管是手机电脑还是一些嵌入式的设 ...

  8. MFC绘图基础

    ·MFC中三种坐标系统: 1.屏幕坐标系 坐标原点位于屏幕左上角 2.(非客户区)窗口坐标系 坐标原点位于窗口左上角(包括标题栏) 3.客户区坐标系 坐标原点位于客户区左上角(不包括标题栏) ·坐标系 ...

  9. python面试题之迭代器和生成器的区别

    1 迭代器是一个更抽象的概念,任何对象,如果它的类有next方法和iter方法返回自己本身.对于string.list.dict.tuple等这类容器对象,使用for循环遍历是很方便的.在后台for语 ...

  10. Mybatis一级缓存和二级缓存 Redis缓存

    一级缓存 Mybatis的一级缓存存放在SqlSession的生命周期,在同一个SqlSession中查询时,Mybatis会把执行的方法和参数通过算法生成缓存的键值,将键值和查询结果存入一个Map对 ...