CSS基础语法

HTML插入图片

示例

CSS

元素关系

1.若A直接包含B，A是B的父元素，B是A的子元素

2.若A直接或间接包含B，A是B的祖先元素，B是A的后代元素

3.若A和B拥有同一个父级，A和B互为兄弟关系

元素图

元素分类

1.块级元素 一个元素独占一行，会自动换行，宽高可设置

例如：h p

2.行内元素 多个元素在一行显示，不会自动换行，宽高自动

例如：a img

div元素

它是一个非常常见的元素

它没有任何的语义

它仅仅表示一个容器，用于包含其它元素

在网站布局时，它通常用于表示页面的区域

语义化结构元素

他们和div没有本质区别，只不过他们有语义

优点；每块区域含义清晰，有利于SEO，帮助特殊设备

语义化结构元素解释

结构图

header：用于表示页面或某个区域的头部

nav：用于表示导航栏

aside：用于表示跟周围主题相关的附加信息

article：用于表示文章或其它可独立页面存在的内容

section：用于表示一个整体的一部分主题

footer：用于表示页面或某个区域的脚注

font-size：文字尺寸

background-color：背景颜色

css注释

示例

 css的代码由一个一个的规则组成

示例

width：宽 height：高 line-height：行高

当行高与高相同时，内容垂直居中

left 左 right 右 top 上 bottom 下

 引入css方法

1.外部样式表 在head标记里通过link标签引入

2.内部样式表 在head标记中通过style标签书写css样式

3.内嵌样式表 在开始标记里通过style属性直接书写css样式

当三种方法都存在时采用就近原则

类选择器

选中页面上所有有该类名的元素

1.类选择器 .加类名{属性：属性值；}

html里在开始标记后面加空格class取名

示例：

2.id选择器：#id名{属性：属性值}

有两个唯一性

一个id名只能在页面上出现一次

一个元素只可以有一个id名

3.子级选择器

父元素>子元素{属性：属性值}

只能一层一层去选不能越层

取类名

一个元素可以有多个类名

1.区分大小写

2.不能用纯数字或数字开头

3.不能加其它符号

4.望名知意

取名法有：驼峰命名法 leftTop

蛇形命名法 left_top

连字符 left-top