CSS基础知识01
一、CSS基础知识介绍
1.css是cascading style sheet层叠式样式表的简写
2.css小用法
加粗:font-weight:bold; 正常用:normal;
斜体:font-style:italic; 正常用:normal;
下划线:text-decoration:underline; 正常用:none;
加粗快捷键:fwb+tab
不加粗快捷键:fwn+tab
斜体快捷键:fsi+tab
不斜体快捷键:fsn+tab
下划线快捷键:tdu+tab
没有下划线快捷键:tdn+tab
3.class类
1)class可以重复,同一个页面能有多个标签同时属于某一个类。
2)同一个标签可以同时携带多个类,用空格隔开。
注意:在页面中尽量用class,id是js用的,js要通过id属性得到标签。
二、CSS的高级选择器
1.交集选择器
交集选择器可以连续交,例如:
html:
<h3 class="spacial zhangyao">
<h3 class="spacial">
css:
h3.spacial.zhangyao { }
选择的元素同时满足两个条件:必须是h3标签,然后必须是special标签,交集选择器没有空格。
2.通配符*
*就表示所有元素,效率不高,尽量不要使用。
3.css的继承性和层叠性
可继承的属性:
color、text-开头的、line-开头的、font-开头的
这些关于文字样式的都能够继承;所有关于盒子的、定位的、布局的属性都不能继承。
层叠性
4.权重问题大总结
1)先看有没有选中的,如果选中了,那么就以(id数、类数、表签数)来计权重。谁大听谁的,如果都一样,挺后写的为准。
2)如果没有选中,那么权重是0。如果大家都是0,就近原则。
5.important属性
k:v!important; 来给一个属性提高权重,无穷大。
强调3点:
1)!important 提升的是一个属性,而不是一个选择器;
2)!important 无法提升继承的权重,该是0还是0;
3)!important 不影响就近原则。
三、盒模型
1.盒子中的区域
一个盒子中主要的属性就5个:width、height、padding、border、margin
2.padding
padding区域有背景颜色,也就是说,background-color讲填充所有border以内的区域。
注:以下写法错误:不能把小属性写在大属性前面
padding-left:30px; padding:20px;
padding:20px;错误 padding-left:30px;正确
3.一些元素默认带有padding(如ul)
因此,我们为了做站方便控制,总喜欢清除这个默认的padding
*{ margin:0;
padding:0;}
但是,*的效率不高,所以我们选择使用并集选择器。如:
h1,h2,h3······dl { margin:0;padding:0;}
4.border-->是一个大综合属性
比较稳定的就几个:solid、dashed、dotted
border属性能够被拆开,有两大拆开方式:
1)按3要素来拆:
border-width:10px 20px 10px 30px;
border-style:solid dashed dotted ;
border-color:red green blue yellow;
2)按方向来拆:
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
按方向拆还能再拆一层:
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
某一条边没有:border-left:none;
也可以调整左边边距宽度为0 border-left-width:0;
CSS基础知识01的更多相关文章
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- DIV+CSS专题:第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- Web学习篇之---css基础知识(一)
css基础知识(一) 1.css样式: 载入css样式有下面四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css&quo ...
随机推荐
- 高通 8x12 添加 TP和按键
1 .在tp的驱动文件中添加以下代码实现按键功能 [plain] view plain copy static ssize_t ft5x06_virtual_keys_register(struct ...
- leetcode 104 Maximum Depth of Binary Tree二叉树求深度
Maximum Depth of Binary Tree Total Accepted: 63668 Total Submissions: 141121 My Submissions Question ...
- 《java入门第一季》之StringBuffer小案例
这里是针对其反转功能来举的例子,再对比之前写的一篇String类的反转功能,StringBuffer明显提高了代码量,提高了效率. import java.util.Scanner; /* * 把字符 ...
- 安卓Tv开发(二)移动智能电视之焦点控制(按键事件)
原文:http://blog.csdn.net/sk719887916/article/details/44781475 skay 前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家 ...
- 网站开发进阶(二十一)Angular项目信息错位显示问题解决
Angular项目信息错位显示问题解决 绪 最近在项目开发过程中遇到这样一个棘手的问题:查询出所有订单信息后,点击选择某一个订单,查询出的结果是上一次查询所得的结果.而且会出现点击两次才可以显示订单详 ...
- 标准会话对象——StandardSession
Tomcat使用了一个StandardSession对象用来表示标准的会话结构,用来封装需要存储的状态信息.标准会话对象StandardSession实现了Session.Serializable.H ...
- sql的having深入理解;group by只返回一组的一行,compute更好
Having where 子句的作用是在对查询结果进行分组前,将不符合where条件的行去掉,即在分组之前过滤数据,条件中不能包含聚组函数,使用where条件显示特定的行. having 子句的作用是 ...
- Android Studio相关资料链接
AndroidStudio中文社区:http://www.android-studio.org/index.php Android studio删除工程项目:http://www.linuxid ...
- "《算法导论》之‘线性表’":双向循环链表
本文双链表介绍部分参考自博文数组.单链表和双链表介绍 以及 双向链表的C/C++/Java实现. 1 双链表介绍 双向链表(双链表)是链表的一种.和单链表一样,双链表也是由节点组成,它的每个数据结点中 ...
- ActiveMQ系列之一:ActiveMQ简介
ActiveMQ是什么 ActiveMQ是Apache推出的,一款开源的,完全支持JMS1.1和J2EE 1.4规范的JMS Provider实现的消息中间件 (Message Oriented ...