Web云笔记--CSS
CSS CSS CSS
Web自学第二阶段之CSS
参考资料:《Head First HTML&CSS》(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出版社
全部阶段:HTML基础àCSSà高级HTMLàJavaScriptàPHP脚本àWeb渗透
前情提要:早在上世纪九十年代初,为了迎合互联网的发展,(因为当时互联网是有了但是人们上网没东西可看。。)人们迫切的期望一种统一的版面在网络上共享信息,一种叫做超文本(hyper text)的文本诞生了,超文本之所以叫超文本是因为它不仅能展现出文本,还能“花样”地展现文本(好吧当时根本没有多媒体的概念)比如字体有大有小,有不同的颜色,甚至画一张表格(可以看成word的前身),这种超文本能够传达出比纯文本文件更丰富的内容,所以将之放在网页上再好不过了,为了实现它,超文本标记语言html诞生了。
7.CSS简介
!!!!!!!!!!!!!!CSS的前身:没有前身,只能说是雏形。早期超文本标记语言html为了在排版,字体和色彩等方面增添一些样式,特别引入了元素的style属性,通过style属性程序员可以控制元素的文本、背景、边框、内外边距等的样式,虽然这个属性目前任然通用而且也被小编我认为是最方便最直观的添加样式的方式,但是由于市场的原因,比如说要对网页样式进行批量的修改亦或是针对不同时间地点甚至不同用户而要采用不同的样式风格,因此我们引入了新的语言-------CSS。
CSS(cascade style sheet层叠样式表)文件更像是一个滤镜,网页就像一张照片,通过CSS而焕然一新!!!!!
改变网页的样式有三种方法,分别是通过html属性,css文件以及JavaScript程序,但是三种方式更本上都是通过css语言来完成的!!!!
!!!!!!!!!!!!CSS的语法和HTML截然不同,没有了尖括号,除号,空格,引号和等号,取而代之的是大括号,减号,分号,逗号和冒号。
的color样式貌似不会继承。
!!!!!!下边框与下划线的区别:如果文本(innerHTML)有转行(认为转或者自动转)那么下划线将有多行的,但下边框(border-bottom)只有一条。
Css的基本组成单元(就是一个个大括号)叫做选择器。
!!!Css只能对body以下的元素(包括body)增加样式。
Css文件既可以内嵌在html的中也可以通过外部链接,固定格式:
通常一个网站的所有网页的风格一致,所以通常会共享同一个css文件。
绝大多数样式属性都是继承的。
继承与覆盖。
!!!!!Css的批量增添样式方法:既可以通过元素类型来选择,也可以自定义类和ID
元素和类是多对多的关系。
元素和ID是一对一的关系。
Css和html的属性值之间都是空格隔开,但属性之间前者是分号后者是空格。
Css中有错误,错误以下的其他规则都会被忽略??????!!!!!!!!!!!
Css查错工具:http://jigsaw.w3.org/css-validator/
行业建议:这个社会不需要精而需要广,不会的点只要会查就ok!
8、CSS语文课------扩大词汇量
字体五大家族:
Sans-serif系列:
Verdana
Arial Black
Trebuchet MS
Arial
Geneva
特点是:无衬线,很“工整”,粗细均匀
Serif系列:
Times
Times New Roman
Georgia
特点:有棱角,粗细不均
Monospace系列:
Courier
Courier New
Andale Mono
特点:不同字符不同的宽度
Cursive系列:
Comic sans
Apple Chancery
特点:草书
Fantasy系列:
LAST NINJA
Impact
特点:花样字体
Css指定字体font-family:字体名称之间他妈的用逗号隔开。。。记住就好记住就好
而且大小写必须一致(首字母大写)
从左至右,客户机不支持此字体就向右找,所以最后一个通常写五大系列名
!!!因为空格的特殊性,字体名中有空格的话,要用双引号把整个字体名括起来
Web云字体@font-face:
字体文件与字体文件格式:
字体文件:定义了字体样式的形状(就是图片)
字体文件格式:用那种编码来表示上面的字体文件(联想图片格式)
!!!!!字符的不同字体在字符编码中都是同一个
常用格式:ttf otf eot svg woff
每日推荐:PDF文件跨设备跨系统跨字体值得一用(缺点是体积大)
每个字体拥有一个@font-face
通常屏幕像素1cm=25px;1px=0.4mm
指定字体大小的三种方式:
1. 指定px值(字体高度)
2. 指定百分比%:相对于父元素
3. em。同上
一些默认值:
H1:2em
H2:1.5em
H3:1.17em==big
H4==p==ul==ol==1em
H5==0.83em==small
H6:0.75em
Body:14px
习惯:调整body字体大小控制所有字体等比例缩放
快捷方式:xx-small x-small small medium large x-large xx-large
Jim独创L(不要脸):
Small- small small+ medium- medium medium+ large- large large+
或者:
Smallest smaller small small-medium medium medium-large large larger largest
温馨提示:了解就好,看一遍就好,不用记忆。。。
改变字体粗细:
Font-weight:normal/bold/lighter。。。
Text-decoration:none去掉下划线
斜体:
Font-style:italic/oblique
HTML、css都不是程序语言,所以浏览器都有差错改错功能,不区分大小写
三种指定颜色方法:
1.rgb(xx%,xx%,xx%)或rgb(xx,xx,xx) rgba?
2.#xxxxxx缩写:#xxx
3.颜色名:150+种
Css语法错误,浏览器忽略整个选择器,不影响其他选择器
转载于:https://www.cnblogs.com/jinhengyu/p/7516764.html
Web云笔记--CSS相关推荐
- 好程序员web前端CSS选择符(选择器):表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
- Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- Tridiv:基于 Web 的 CSS 编辑器,创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
- 微信公众号Web页面CSS文件里面的样式不加载
问题描述:微信公众号Web页面CSS文件里面的样式不加载,但在浏览器中打开是可以正常加载CSS文件里面的样式的 解决办法:微信页面的缓存是十分严重的,即使清除了移动设备(手机)上该应用的缓存,有时也是 ...
- web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码 在阿里iconfont中创建项目 新建项目 搜索自己想要的图标并添加入库 点击购物车 添加至项目 回到"我的项目" ...
- web应用——CSS
Web应用 -- CSS 二.CSS 1.样式定义方法 行内样式表 直接定义在标签的<style>属性中,作用范围:仅对当前标签产生影响 例如: <img src="/im ...
- WEB学习-CSS盒模型
盒子的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin. width是"宽度"的意思,CSS中width指的是内容的宽度,而不 ...
- !Web云笔记--HTML基础
Web自学笔记第一阶段笔记综合汇总 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出版社 全部阶段: ...
最新文章
- 使用基本MVC2模式创建新闻网站
- leetcode算法题--等差数列划分
- jQuery手机菜单
- log4j 配置文件_Log4j系列教材 (三)- log4j.xml
- 手机的小窗口怎么弄_做一个表白小程序
- .NET 6 即将到来的新特性 — 隐式命名空间引用
- Solidworks如何将参考平面的图形投影到某曲面上
- 首个开源 Linux 系统登陆火星,占有率超 Windows,一同登录还有一款安卓手机芯片...
- 【leetcode】33. Search in Rotated Sorted Array
- 三星关闭在华最后一家电脑厂 约850名员工受影响
- leetcode Valid Palindrome
- Odoo链接magento纪实
- 【WPF】在MenuItem中下划线“_”显示不正常
- jqAutoComplete 和 knockout
- [原创]Silverlight与SQLite数据库的互操作(CURD完全解析)[Final]
- 【优化求解】基于matlab生物地理算法求解MLP问题【含Matlab源码 1415期】
- 解决Win10系统使用暴风激活导致的劫持浏览器主页问题
- 你连阶级固化的原因都搞不清,又凭什么不被固化在底层?
- [HNOI 2015]落忆枫音
- open-falcon短信报警