关于前端开发一些css的技巧

文本属性连写:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

 p {

   font-size: 16px;

   font-weight: bold;

   font-family: 微软雅黑;

   font-style: italic;

   line-height: 40px;

 }

</style>

</head>

<body>

<p>文本属性连写</p>

<p>文本属性连写</p>

</body>

</html>

在浏览器中显示为:

font-weight: bold;建议写成font-weight: 700,因为700大概等于bold,其中font-weight取值范围在100~900;

将style的p修改为

p {

font: italic 700 16px/40px 微软雅黑

}

浏览器效果和上边是一致的:

可能你会有所困惑,一定字体风格在前,然后接着写字体粗细、字体大小、行高、那种字体么?

我在这建议采用这种,语法: font: font-style font-weight font-size/line-height font-family;

可不需要行高:  font: font-style font-weight font-size font-family;

里面文字大小和字体为必写;只写一个字体大小,font: 16px;是不被执行,直接写font-size: 16px;即可。

当然你打开搜狐主页,会发现人家的字体写成如下图:

一个unicode编码,因为你写成中文还是得转化为unicode编码,再被浏览器引擎解析,直接写成unicode编码省去转换过程,是为提高网页性能。

当然你要写宋体、微软雅黑等字体的unicode编码值会发现记忆很麻烦,在这我教一个简单的小技巧。

第一步:打开浏览器,按住F12;

第二步:打开Console界面;

第三步:输入          ‘   escape("宋体")  ’;

第四步:将%u改成 ’ \ ‘ 即可;

这便是宋体的unicode编码   ‘ \5B8B\4F53 ’

欢迎大家一起学习,一起学习和分享使我快乐!

前端开发-Sky

原文地址:https://www.cnblogs.com/360home/p/10117067.html

时间: 2024-11-10 11:20:41

关于前端开发一些css的技巧的相关文章

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

前端开发规范-CSS规范

前端开发规范-CSS规范 1.通用约定 (1)代码组织 以组件为单位组织代码段: 制定一致的注释规范: 组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔: 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动: 良好的注释是非常重要的.请留出时间来描述组件(component)的工作方式.局限性和构建它们的方法.不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的. 提示:通过配置编辑器,可以提供快捷键来输出一致认可的注释模

web前端开发分享-css,js工具篇

来源:http://www.cnblogs.com/jikey/p/3607133.html web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. php

前端开发:CSS 初级和高级指南

CSS 初级和高级指南: 没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CSS 代码片段:15 个邪恶的技巧 15 个必学的 CSS 技巧 8 个 CSS 链接 链接小贴士 8 个超简洁 CSS 小贴士 为更好的 CSS 代码:70 个专家级点子 30+ CSS 速查表和快速指南 CSS 大师的 10 个原则 10 个优秀的 CSS 教程和技巧 5

自学前端开发 新版css时钟效果图

想要自学前端开发,你要的学习资料到了-web前端交流学习群21,新版css时钟效果图 <!DOCTYPE html> <html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>RunJS</title> <style> .clock{ width:200px; heig

前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提并行,岂不快哉.咳,话题扯得有点远,今天博主给大家写一篇关于css如何设置select.radio . checkbox .file样式的问题,这里不涉及模拟框,仅介绍原生情况下如何做到自定义样式,废话不多说,赖次够! 1.select与input file: 相信大家都遇到过这样的问题,大多数浏览

移动webAPP前端开发代码演示和技巧汇总

1. viewport:webapp视图 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是除去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素) height -            //  viewport 的高

web前端开发工具HBuilder使用技巧之快捷键

/*注:本教程针对HBuilder5.0.0,制作日期2014-12-31*/ 创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter) 中途换行: 'Ctrl+Enter' 设置charset: m e 6 Enter 引用外部js: s 2 Enter 'Ctrl+Enter' 创建js区块: s Enter 创建函数: f u n 3 (或者 f u n n Enter) 为函数命名:W h o i s E 跳转到函数末尾: End

web前端开发企业级CSS常用命名,书写规范总结

1.常用命名 标题: title 摘要: summary 箭头: arrow 商标: label 网站标志: logo 转角/圆角: corner 横幅广告: banner 子菜单: subMenu 搜索:search 搜索框: searchBox 登录: login 登录条:loginbar 工具条: toolbar 下拉: drop 标签页: tab 当前的: current 列表: list 滚动:scroll 服务: service 提示信息: msg 热点:hot 新闻: news 小