Web前端-CSS必备知识点

Web前端-CSS必备知识点
css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位。
链接:
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
link标签:
<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
样式:
h1 { color: red; };
@import指示引入多个外部样式表的链接
<style type="text/css">
@import url(styles.css);
p { color: red };
</style>
css注解
/* dashucoding */
内联样式:
<p style="color: red;" >dashucoding</p>
规范:
选择符 + 声明
p { color: red; } // 选择符 属性 值
p { font-weight: bold; }
伪类和伪元素
| 属性 | 说明 |
|---|---|
:link |
超链接是一个未访问过的地址 |
:visited |
访问过的网页 |
:active |
处于活跃的状态 |
a { color: red; }; a:visited { color: red; };
伪元素:
:first-letter 和 :first-line 首字母 和 首行
p:first-letter { color: red; }
css有个特点是继承,可以依赖于祖先-后代关系。
!important有这个标记,表示这条规则优先
p { color: red !important; }
元素分类:
三种类型:块级元素,内联元素,列表项元素
块级元素有段落,标题,列表,表格,div,body等。内联元素有a,em,span等。列表项元素有li元素。
dispaly: block | inline | list-item | none
颜色:
rgb(100%, 100%, 100%) 红蓝绿 ,白色
单位:
em 给字体的font-size值
文本:
文本缩进
text-indent <长度> | <百分比>
p { text-indent: -4em; }
text-align属性
用于元素中文本行的对齐方式
text-align: left | center | right | justify
white-space空白
white-space pre | nowrap | normal
p { white-space: normal; } 将如何空白压缩成单个空白符
white-space属性值为pre,可以将元素内的空白忽略。
p { white-space: pre; }
行高:
line-height文本行的基线间的距离。
纵向对齐,vertical-align
vertical-align: baseline使元素的基线同父元素的基线对齐。
vertical-align: sub; vertical-align: super;
低端对齐: vertical-align
顶端对齐:vertical-align
vertical-align: top; vertical-align: text-top;
中间对齐:
vertical-align: middle;
文字间隔:
word-spacing 长度 | normal
word-spacing: 0.3em;
字母间隔:
letter-spacing: 长度 | normal
文本转换:
text-transform uppercase | lowercase | capitalize | none
文本修饰:
text-decoration: none | overline | line-through
框:
width 长度 | 百分比 | auto
height 长度 | auto
margin 长度 | 百分比 | auto
margin: top right bottom left
margin-top
margin-right
margin-bottom
margin-left
border-width // thin medium thick
border-style: none;
padding
浮动与清除
float: left | right | none
<img src="" style="float: right"; alt="dashu">
float: none 用于防止元素浮动
清除浮动元素
clear left | right | both | none
clear原理是增加元素的上边界,使它在低于浮动元素的位置结束,清除元素的上边界宽度当有效地忽略。
list-style-type disc
disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none
list-style-type
disc 为实心圆
circle 为空心圆
square 实心或空心方块
列表项图像
list-style-image <url> | none
列表项位置:list-style-position
list-style-position: inside | outside
定位:
position: static | relative | absolute | fixed | inherit
溢出:
overflow: visible | hidden | scroll | auto | inherit
溢出剪切:
overflow-clip: rect | auto | inherit
元素剪切:
clip rect | auto | inherit
元素可见性:
visibility: visible | hidden | collapse | inherit
相对定位:
position: relative;
绝对定位:
position: relative;
固定定位:
position: fixed;
层叠定位:
z-index: integer | auto
轮廓:
outline, outline-color, outline-style, outline-width
边框:
border-top-color, border-right-color, border-bottom-color
border-left-color, border-top-style
border-right-style, border-left-style
实例:
<table cellspacing=0 border cellpadding="10">
<tr>
<td rowspan=2>dashu</td>
<td colspan=2>dashu2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
结言
好了,欢迎在留言区留言,与大家分享你的经验和心得。
感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。
作者简介
达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。
Web前端-CSS必备知识点的更多相关文章
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- 1+x 证书 Web 前端开发 MySQL 知识点梳理
官方QQ群 1+x 证书 Web 前端开发 MySQL 知识点梳理 http://blog.zh66.club/index.php/archives/199/
- Web前端开发必备
前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...
- Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- web前端开发必备压缩工具整理
影响网站打开时间有两个因素,一个是网页加载速度,另一个是网站页面的大小.网站加载速度与用户所处的网络环境及主机性能有关,而网站页面的大小则由网站开发者决定,最主要的就是web前端开发工程师的工作.本文 ...
- web前端—css面试题
1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...
- 国人Web前端开发必备干货,一个完美支持IE6在内所有浏览器的CSS框架
摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...
- ASP.NET MVC开发:Web项目开发必备知识点
最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...
随机推荐
- Web前端-Vue.js必备框架(五)
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Odoo:全球第一免费开源ERP 人力资源模块操作指南(完美珍藏版)
概述 人力资源管理概述 一般企业里,和人力资源相关的工作有:1)员工合同管理,即员工基本档案管理:2)招聘管理,即岗位及岗位人员补充管理:3)员工薪资计算: 4)员工考勤:5)员工休假管理:6)员工绩 ...
- oracle如何查看当前有哪些用户连接到数据库
可以执行以下语句:select username,serial#, sid from v$session; ---查询用户会话alter system kill session 'serial#, s ...
- windows系统以及linux系统的优缺点以及区别
一.Linux以及Windows系统的优缺点对比 Windows Linux 优点 Windows Server系统相对于其他服务器系统而言,极其易用,极大降低使用者的学习成本. Linux系统是 ...
- python3 完全理解赋值,浅copy,深copy 通过地址详细理解~
额...老规矩,先来一天NLP再说,也没几条了. 十,在任何一个系统里,最灵活的部分是最能影响大局的部分 灵活便是有一个以上的选择,选择便是能力,因此最灵活的人便是最有能力的人. 灵活来自减少只相信自 ...
- 理解Linux文档的默认安全机制、隐藏属性、特殊权限,妈妈在也不用担心你从删库到跑路!!!
写在前面 前面的章节 详解Linux文档属性.拥有者.群组.权限.差异,介绍了文档的基本权限,包括读写执行(r,w,x),还有文档若干的属性,包括是否为目录(d).文件(-).链接文件(l).拥有者. ...
- Javascript高级编程学习笔记(91)—— Canvas(8) 阴影
阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffs ...
- .NET Core TDD 前传: 编写易于测试的代码 -- 单一职责
第1篇: 讲述了如何创造"缝". "缝"(seam)是需要知道的概念. 第2篇, 避免在构建对象时写出不易测试的代码. 第3篇, 依赖项和迪米特法则. 第4篇 ...
- python内置方法大全
数学运算 abs:求数值的绝对值 >>> abs(-2) 2 divmod:返回两个数值的商和余数 >>> divmod(5,2) (2, 1) >> ...
- C#版[击败99.69%的提交] - Leetcode 242. 有效的同构异形词 - 题解
C#版 - Leetcode 242. 有效的同构异形词 - 题解 Leetcode 242.Valid Anagram 在线提交: https://leetcode.com/problems/val ...