CSS内容简单总结
day50
1. 内容回顾
1. 伪类和伪元素
1. 伪类
1. :link
2. :visited
3. :hover (重要)
4. :active
5. :focus(input标签获取光标焦点)
2. 伪元素
1. :first-letter
2. :before(重要 在内部前面添加)
3. :after(重要 在内部后面添加)
2. CSS属性
1. 字体
1. font-family
2. font-size
3. font-weight
2. 文本属性
1. text-align 对齐(重要)
2. text-decoration 装饰 (去除a标签的下划线(text-decoration: none))
3. text-indent 首行缩进
3. 背景属性
1. background-color 背景颜色
2. background-image 背景图片(九宫格涮葫芦娃) url() no-repeat 50% 50%
4. color
1. red (直接写名字)
2. #FF0000
3. rgb(255, 0, 0) --> rgba(255,0,0,0.5)
5. 边框属性 border
1. border-width (边框宽度)
2. border-style (边框样式)
3. border-color (边框颜色)
简写:
border: 1px solid red;
6. CSS盒子模型
1. content (内容)
2. padding (内填充) 调整内容和边框之间距离时使用这个属性
3. border (边框)
4. margin (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
注意: 要习惯看浏览器console窗口那个盒子模型
7. display (标签的展现形式)
1. inline
2. block 菜单里面的a标签可以设置成block
3. inline-block
4. none (不让标签显示,不占位)
8. float(浮动)
1. 多用于实现布局效果
1. 顶部的导航条
2. 页面左右分栏 (博客页面:左边20%,右边80%)
2. float
1. 任何标签都可以浮动,浮动之后都会变成块级 a标签float之后就可以设置高和宽
3. float取值:
1. left
2. right
3. none
9. clear 清除浮动--> 清除浮动的副作用(内容飞出,父标签撑不起来)
1. 结合伪元素来实现
.clearfix:after {
content: "",
display: "block",
clear: both;
}
2. clear取值:
1. left
2. right
3. both
10. overflow
1. 标签的内容放不下(溢出)
2. 取值:
1. hidden --> 隐藏
2. scroll --> 出现滚动条
3. auto
4. scroll-x
5. scroll-y
例子:
圆形头像的例子
1. overflow: hidden
2. border-radius: 50% (圆角)
11. 定位 position
1. static(默认)
2. relative(相对定位 --> 相当于原来的位置)
3. absolute(绝对定位 -->相当对于定位过的前辈标签)
4. fixed (固定 --> 返回顶部按钮示例)
补充:
脱离文档流的3种方式
float
absolute
fixed
12. opacity (不透明度)
1. 取值0~1
2. 和rgba()的区别:
1. opacity改变元素\子元素的透明度效果
2. rgba()只改变背景颜色的透明度效果
13. z-index
1. 数值越大,越靠近你
2. 只能作用于定位过的元素
3. 自定义的模态框示例
2. CSS补充
CSS内容简单总结的更多相关文章
- CSS内容简单归纳
具体内容请查阅<CSS参考手册> 一.CSS模块介绍 1.1 CSS1中定义了网页基本属性 字体.颜色.补白.基本选择器等 1.2 CSS2中在CSS1的基础上添加了高级功能 浮动和定位. ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- 《HTML 5网页开发实例具体解释》样章、内容简单介绍、前言
http://spu.jd.com/1167757597.html http://product.dangdang.com/23484942.html 样章 http://download.csdn. ...
- html css的简单学习(二)
html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...
- html css的简单学习
html css的简单学习 css的内边距:padding (auto.length.%)(顺序:上.右.下.左)padding-toppadding-leftpadding-rightpadding ...
- CSS绘制简单图形
究竟该用字体图标.图片图标.还是CSS画一个图标?我也不知道.各有千秋吧.本文将介绍如何用css绘制简单的图形,所有测试在chrome58.0完成,如果你不能得到正确结果请到caniuse查一查看看是 ...
- Html5 和 CSS的简单应用
本文是利用几个简单的小例子,来实现html+css的简单应用. 菱形链接菜单 本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: CSS3.0中的2D变换,如:旋转tran ...
- html css的简单学习(三)
html css的简单学习(三) 前端开发工具:Dreamweaver.Hbuilder.WebStorm.Sublime.PhpStorm...=========================== ...
- css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- jquery插件:textarea的字数提示、textBox的文字提示
引用文件: <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...
- JQuery中Ajax的Post提交在IE下中文乱码的解决方法
原文地址:http://www.bitscn.com/pdb/ajax/316671.html 引言: 在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,该如何解决呢? ...
- ROS-MikroTik-RouterOS-培训认证各种证书
官方原文: https://mikrotik.com/training/about MikroTik certified training programs MTCNA - MikroTik Cert ...
- echarts折现图配置
js引用和div容器 <div id="container" style="height: 100%"></div> <scrip ...
- Windows使用Idea编译spark源码
1. 环境准备 JDK1.8 Scala2.11.8 Maven 3.3+ IDEA with scala plugin 2. 下载spark源码 下载地址 https://archive.apach ...
- CVPR 2019 | 用异构卷积训练深度CNN:提升效率而不损准确度
对于深度卷积神经网络而言,准确度和计算成本往往难以得兼,研究界也一直在探索通过模型压缩或设计新型高效架构来解决这一问题.印度理工学院坎普尔分校的一篇 CVPR 论文则给出了一个新的思路——使用异构的卷 ...
- Android被忽略的tools
自动生成的布局xml文件,很多都带有tools字样:但是大部分都被我们删除了: 其实它的作用是让我们这些开发者预览用的,十分的方便: 事例一个TextView: <TextView androi ...
- unicode转中文以及str形态的unicode转中文
今天在工作中遇到这样一个问题(工作环境为Python2.7.1),需要将一个字典中字符串形态的Unicode类型的汉字转换成中文,随便总结一下: 1.unicode转中文 old = u'\u4e2d ...
- java 多线程(生产者消费者)
转 https://www.oschina.net/code/snippet_111708_25438 这个问题挺经典,我这个解法的本质在于将问题抽象为生产者消费者模型,但是是一个特殊的生产者消费者模 ...
- 报错,但不影响运行ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code = -2
参考:http://blog.csdn.net/zxl0016/article/details/7327125 eclipse 3.4+jdk1.6 编译正常通过,运行debug模式时报错 ERROR ...