font-size | 易学教程

CSS单位

阅读更多关于 CSS单位

Css 单位 P x ：像素或许被认为是最好的“设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。在web上，像素仍然是典型的度量单位，很多其他长度单位直接映射成像素，最终，他们被按照像素处理，javascript语言里的单位就是使用的像素。 In: 英寸是一个物理度量单位，但是在CSS领域，英寸只不过被直接映射成像素罢了。 Cm: 厘米。 Mm: 毫米。相对字体长度： Em： Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生变化。在没有任何CSS规则的前提下， 1em的长度是： 1em=16px=0.17in=12pt=1pc=4.2mm=0.42cm Em单位有点古怪，当设置了font-size属性后，它会逐级向上相乘，所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里，而这个元素又在另一个设置了font-size:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem（根em）。这意味着即使一个元素设置为10em，这个元素也不会在他出现的每个地方都是10em。如果font-size变化了，它可能会宽点

CSS单位

阅读更多关于 CSS单位

css单位

阅读更多关于 css单位

viewport rem 基本认识

阅读更多关于 viewport rem 基本认识

今天某傻子问我viewport rem的问题，由于太忙，下午才匆忙的给她叨叨了两句，我估计她也是懵的吧，因此，在这复习记录一下这两点知识。 viewport 翻译过来就是 “视区”，简单来说，就是移动端显示网页的区域，或者说是app中webView的大小，它和浏览器可视区域的大小不同，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。一般来说，移动设备上的viewport都是要大于浏览器可视区域的，所以开发时在移动端显示网页经常出现滚动条。很多资料中都有viewport三个理论的说法: layout viewport visual viewport ideal viewport 这里简单解释一下： layout viewport: 因为移动设备的屏幕都不是很宽，为PC端浏览器所设计的网页在移动端显示，整改布局就会乱掉，另外css中的1px并不代表屏幕的1px，你分辨率越大，css中1px代表的物理像素就会越多，DPR（devicePixelRatio）的值也越大，因为你分辨率增大了，但屏幕尺寸并没有变大，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清，所以浏览器就决定默认情况下把viewport设为一个较宽的值（比如：980px）

CSS层叠式样式表学习笔记

阅读更多关于 CSS层叠式样式表学习笔记

CSS和HTML分开的优点 HTML负责基本的内容展示，而CSS负责样式的控制，制造效果。 1、实现解耦合的作用 2、使得协作更加明确 3、开发效率得到提高 CSS和HTML的结合方式内联：就是在想要控制样式的的标签内直接控制，只能作用于该部分，范围最小。内部：直接在head内部中控制该文件的样式。外部：通过link标签链接一个外部的css文件，而控制方式就直接书写在这个外部css文件中。 CSS的基本语法格式：选择器{ 属性：属性值; 属性：属性值; } 选择器：就是用于筛选特征相似的元素基础选择器： id选择器：#id属性值{} 元素选择器：直接筛选元素相对应的内容类选择器：class属性值{} 优先性上id>calss>元素扩展选择器：通用选择器：*{}选择所有元素并集选择器：选择器1，选择器2{} 子集选择器：选择器1 选择器2{} 父集选择器：选择器1>选择器2（选择选择器2上的选择器1）属性选择器：元素名称[属性=“属性值”]{} 伪类选择器：元素：状态{} 状态：linked:初始化 hover:鼠标悬浮状态 active：鼠标点击但是未打开状态 visited:访问过状态 CSS属性字体（Font）属性 font-size：字体大小 font-family：字体系列文本（Text）属性 color

inline-block 去除间隙

阅读更多关于 inline-block 去除间隙

inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。如图所示：解决办法：给父元素设置font-size:0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="Chomo"/> <link rel="start" href="http://www.14px.com" title="Home"/> <title>利用box-sizing实现div仿框架</title> <style type="text/css"> *{ margin: 0; padding: 0; } .parent{ font-size: 0; } div{ display: inline-block; }

05-伪类选择器

阅读更多关于 05-伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte 1 /*没有被访问的a标签的样式*/ 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 /*访问过后的a标签的样式*/ 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 /*鼠标悬停时a标签的样式*/ 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 /*鼠标摁住的时候a标签的样式*/ 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 } View Code 再给大家介绍一种css3的选择器nth-child() /*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; }

02-css的选择器

阅读更多关于 02-css的选择器

css的选择器：1.基本选择器 2.高级选择器基本选择器包含： 1.标签选择器标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 标签选择器 2.id选择器 # 选中id 同一个页面中id不能重复。任何的标签都可以设置id id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值 1 #box{ 2 background:green; 3 } 4 5 #s1{ 6 color: red; 7 } 8 9 #s2{ 10 font-size: 30px; 11 } View Code 3.类选择器所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开类的使用，能够决定前端工程师的css水平到底有多牛逼？玩类了，一定要有”公共类“的概念。 .lv{ color: green; } .big{ font-size: 40px; }

移动端网页要点

阅读更多关于移动端网页要点

移动端网页最大的特点是什么？自适应不同尺寸的屏幕！高大上的叫法:响应式！知道了自适应网页怎么做岂不是能很好解决问题了？那么自适应网页怎么做呢？网上关于这方面的文章有很多，我简单的整理一下。一、 HTML设置在head中加入meta标签 < meta name = "viewport" content = "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" / > 二、CSS解决方案解决思路始终贯彻能用css解决的坚决不用js 那么你想到了什么？媒体查询！@media 可以针对不同的屏幕尺寸设置不同的样式！有了 @media 根据每一个尺寸的屏幕设计一套样式表出来？！那岂不是写到吐血除了 @media，我们还需要rem来配合使用。大家应该知道em 是相对于父级元素来设置字体大小的，而我们的rem是相对于根元素的。这一点很重要。所以我们只要在 @media 中设置不同屏幕尺寸的根元素的字体大小即可。步骤一：根据设计稿制作标准web页我们以iPhone6两倍设计稿标注来制作网页。宽度为750px 设置如下： html , body { font - size : 100 px ; } /* 规定 1rem = 100px; *

博客园css样式代码

阅读更多关于博客园css样式代码

文章有一个好的排版，将能够增加阅读者对其内容的兴趣。本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引的显示、添加文章末尾的固定信息。 0 获取权限首先，在自定一个博客样式之前，我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示支持js代码。 1 美化文章标题在【博客设置】页面中的【页面定制css代码】框中输入下面的css代码即可完成文章标题的美化的。 #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 15px; } #cnblogs_post_body h1 { background: #333366; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体"

订阅 font-size