博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS选择器与盒模型基础
阅读量:7093 次
发布时间:2019-06-28

本文共 923 字,大约阅读时间需要 3 分钟。

hot3.png

CSS是Cascading Style Sheets缩写 也就是层叠样式表  主要用来对HTML元素在展示形式上做一下补充。

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明

selector {declaration1; declaration2; ... declarationN }

选择器通常是想要改变外观的HTML元素  每条声明由属性和值两部分组成

举个例子:

h1 {color:red; font-size:14px;}

选择HTML元素 h1  颜色改为红色 字体大小14px   

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

例如 改变列表中的strange字体变为斜体 并不是粗体 可以使用下面的CSS

li strong { font-style: italic; font-weight: normal;}

这种选择方式就好像是linux中的文件系统目录一样  从父元素确定需要改变外观的元素 

现代web设计广泛使用ID选择器,类选择器和属性选择器 下面逐一介绍:

ID选择器使用#来定义  

#red {color:red;}  定于元素为红颜色

类选择器使用.来定义

.center {text-align: center}  拥有center类的元素居中

属性选择器使用[]定义

[title] {color:red;}  带有title的元素显示为红色

CSS中有一个重要的概念:盒模型 CSS认为HTML元素在布局空间中可以看为一个矩形边框 ,形象的成为盒子模型

一些HTML天生就是盒模型  如div,p 如a span 之类的元素并不是盒模型 通过声明display:block

每个盒子都有:边界、边框、填充、内容四个属性

每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;

内容就是盒子里装的东西;

填充怕盒子里装的东西损坏而添加的泡沫或者其它抗震的辅料;

边框就是盒子本身了;

边界说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。

25220451_KKHq.gif

转载于:https://my.oschina.net/darionyaphet/blog/294862

你可能感兴趣的文章
如何隔離物件之間的相依性
查看>>
linux 下的爆破工具hydra
查看>>
Backup--批量备份和还原
查看>>
轮播组件iceSlider
查看>>
Spark编程指南
查看>>
python入门语法总结 zz
查看>>
向GridView的模板列绑定OnClientClick的函数时出现了奇怪的问题
查看>>
Android之代码创建布局
查看>>
xss实例-输出在<script></script>之间的情况
查看>>
Jquery操作table
查看>>
高并发处理案例
查看>>
在matlab中clear,clc,clf,hold作用介绍
查看>>
[物理学与PDEs]第1章习题8 磁场分布 $\ra$ 电流分布
查看>>
技术书单整理
查看>>
c语言开源项目--SQLite学习资料总结
查看>>
Repeater控件
查看>>
JS模板引擎
查看>>
JavaScript之表单验证讲解
查看>>
MSMQ 消息队列
查看>>
java核心知识点学习----多线程并发之线程同步
查看>>