css基础2

最新推荐文章于 2022-12-04 23:10:52 发布

ImpulsionAndpower

最新推荐文章于 2022-12-04 23:10:52 发布

阅读量226

点赞数

本文链接：https://blog.csdn.net/pupilxiaoming/article/details/76162416

版权

１温习知识

概念：层叠样式表或者叫级联样式表

内嵌式写法：

<head>

</head>

语法：

选择器{属性:值; }

属性	赋值	描述
Color	Color:red;	文字颜色
Font-size	Font-size:20px;	文字大小
Font-family	Font-family:宋体;	文字字体
Font-weight	Font-weight:bold(700) \| normal	文字加粗
Font-style	Font-style:italic \| normal	文字斜体（italic）
Background-color	Background-color:red;	背景颜色
Width\| height	Width: 12px;	宽度和高度
Text-align	Text-align:center;	文字居中
Text-indent	Text-indent:2em;	首行缩进
Margin	Margin: 0 auto;	盒子居中显示

１.1 基础选择器

◆标签选择器

P{属性:值;}

◆类选择器

定义：

.fontcolor{color:red;}

调用：

特点：

◆谁调用谁改变

◆一个标签可以同时调用多个类样式

◆多个标签可以同时调用一个类样式

命名：

◆不推荐使用汉字定义类名

◆不推荐使用标签名或者属性名定义类名

◆不能使用纯数字或者特殊字符（“_”除外）定义类名

◆id选择器

定义：

#自定义名称{属性:值;}

标签通过 id=”自定义名称”

注意：

页面中的表id名称不能重复。

同一个标签不能调用多个id样式

◆通配符选择器

*{属性:值;}

１.2 复合选择器

◆标签指定式选择器

P.类选择器{属性:值;}

既。。。又。。。。

◆后代选择器

选择器选择器{属性:值;}

标签之间的关系属于嵌套关系。

◆并集选择器

选择器,选择器,选择器{属性:值;}

注意：

标签之间不一定是并列关系！！！！！

２ Css书写位置介绍

２.1 内嵌式写法

２.2 外联式写法

☞新建一个文件，后缀名以.css命名（css文件）

☞在html页面中通过

２.3 行内式写法

☞通过给标签设置style属性来设置样式。

２.4 Css书写方式之间的区别

☞内嵌式写法：

◆代码可维护性较差，没有实现css代码与html结构的完全分离

◆影响的范围只有当前页面

☞行内是写法：

◆代码可维护性极差，css代码和html结构没有实现分离

◆影响的范围只有当前标签

☞外联式写法：

◆代码可维护性高，css与html结构完全分离

◆影响范围广，当前整个网页站点。

３ Html标签的分类

显示方式不同进行的分类。

３.1 块级元素

典型代表：

div,p,li,h1...

特点：

☞元素自己独占一行显示（与宽度无关）

☞可以设置宽度和高度

☞当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。

３.2 行内元素

典型代表:

Span， a, font, strong...

特点：

☞元素在一行上显示 ☞不能直接设置宽度和高度

３.3 行内块元素

典型代表:

Image, input(表单控件)

特点：

☞元素在一行上显示

☞可以设置宽度和高度

３.4 元素之间的转换

Display: inline 将元素转化为行内元素

Display：inline-block 将元素转化行内块元素

Display: block 将元素转化为块元素

补充：

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

内联元素（行内元素）内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量

块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - Java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本