博客
关于我
CSS 简明教程
阅读量:562 次
发布时间:2019-03-09

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

CSS

不对css做全面的讲解,而是将常用的知识点列出,并且,还会辅以常用的css技巧,保证在学完后,能写出一个可以看的页面

其实,对于非前端程序员来说,没必要将css学的那么深入,我们主要会使用流行的前端框架,就可以了。

样式的分类

image-20210509184515884

优先级,是 行内样式>内部样式>外部样式

选择器

选择器优先级:id选择器 > 类选择器 > 标签选择器

  • id 选择器

#haha {     //...}
  • 类选择器

.haha {     //...}
  • 标签选择器

p {     //...}

宽度和高度

只要块级元素才可以设置宽度和高度

行级元素设置,是没有效果的

设置 widthheight 即可

背景

背景色

使用 background-color

背景图

image-20210509185650801

字体

大小,样式,粗细

image-20210509185902011

image-20210509190013652

单行文字垂直居中

让高度和行高一样

image-20210509190122003

文字间距

image-20210509190146440

列表样式

修改 li ol这些

image-20210509190454116

image-20210509190545649

边框样式

image-20210509190856982

盒子模型

image-20210509191109912

padding/margin 4 个值时,表示的是什么

margin: 1px 2px 3px 4px;

这表示的,是 上 右 下 左 四个方向的属性

padding/margin 2 个值时,表示的是什么

margin: 0px 10px;

表示 上下为0 左右为10

box-sizing: border-box

image-20210509191652659

margin 0 auto 是什么意思

margin 0 auto,表示 上下0,左右auto

image-20210509192344154

image-20210509192440148

选择器

全局选择器

选中页面上的所有标签

一般是用来取消默认样式 或者是保持整站风格的

* {   				margin: 0;				padding: 0;				}

要注意,有些浏览器,自带的body是有默认样式的,我们需要使用全局选择器,将其 margin 和 padding 全部设置为 0,就像上面那样

并集选择器

image-20210510135241102

交集选择器

image-20210510135604449

父类选择器

image-20210510135924750

子选择器

image-20210510140621994

伪类选择器(重点

主要是为了为标签添加特殊效果

用的最多的是为超链接添加效果(比如鼠标放在上面后,显示的效果)

image-20210510140852101

注意,如果要写这四个,那顺序最好不要变,不然,可能会出现错误

float

块状元素,都是新开一行显示的

但是,使用float,能使他们在同一行显示

image-20210509194415970

image-20210509194731790

去除 float 对其他标签的影响

image-20210509194924037

需要专门为其他元素,设置取消浮动的影响:

both是两边都去除影响

还有right 和 left

.clear {   			clear: both;}

image-20210509195101129

一开始,要去除浏览器默认样式

浏览器是有默认样式的,会导致我们的元素与边框有一定距离,我们要用css去除

a 标签,很傲娇

我们设置某一元素的属性时,对 a 标签,是不生效的,我们要单独为其设置

a {   				text-decoration: none;				color: black;}

display 和 visibility 的区别

display: nono:不显示,也不占据空间

visibility: hidden:不显示,但是占据空间

设置 inline,block,inline-block

有时候,我我们希望元素既可以像行级元素一样,可以同行显示,也可以向块状元素一样,可以设置宽高,这时候,我们就应该将这个元素,设置为 inline-block

写法:

display: inline-block;

image-20210510134609771

转载地址:http://gjvpz.baihongyu.com/

你可能感兴趣的文章
myeclipse的新建severlet不见解决方法
查看>>
MyEclipse设置当前行背景颜色、选中单词前景色、背景色
查看>>
myeclipse配置springmvc教程
查看>>
MyEclipse配置SVN
查看>>
MTCNN 人脸检测
查看>>
MyEcplise中SpringBoot怎样定制启动banner?
查看>>
MyPython
查看>>
MTD技术介绍
查看>>
MySQL
查看>>
MySQL
查看>>
mysql
查看>>
MTK Android 如何获取系统权限
查看>>
MySQL - 4种基本索引、聚簇索引和非聚索引、索引失效情况、SQL 优化
查看>>
MySQL - ERROR 1406
查看>>
mysql - 视图
查看>>
MySQL - 解读MySQL事务与锁机制
查看>>
MTTR、MTBF、MTTF的大白话理解
查看>>
mt_rand
查看>>
mysql /*! 50100 ... */ 条件编译
查看>>
mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法...
查看>>