CSS(1)
使用CSS的注意点:
1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)。
2.style标签中的type属性其实可以不用写,默认就是type="text/css"。
3.设置样式时必须按照固定的格式来设置,key :value;其中:不能省略,分号大多数情况下也不能省略。 
文字属性:
- 规定文字样式的属性
格式:font-style:italic; 取值:normal--正常的,默认是正常的 italic--倾斜的
快捷键:fs font-style:italic; fsn font-style: normal; - 规定文字粗细的属性
格式:font-weight:bold;
单词取值:bold 加粗 、bolder 比加粗还要粗 、lighter 细线,默认就是细线
快捷键:fwb font-weight:bold;
数字取值:100-900整百的数字,700对应的是bold的级别
3.规定文字字体的属性
格式:font-size:30px;
单位:px(像素 pixel)
注意点:通过font-size设置大小时,必须带上px单位
快捷键:fs30 font-size:30px; - 规定文字字体的属性
格式:font-family:"楷体";
注意点:
1)如果取值是中文,需要用双引号或者单引号括起来
2)设置的字体必须是用户电脑里面已经安装的字体(如果设置的字体不存在,则会使用默认的字体来显示)
3)如果想给中文和英文分别单独设置字体,该怎么办?
但凡是中文字体,里面都包含了英文,但凡是英文字体,里面都没有包含中文。也就是说中文字体可以处理英文,而英文字体不能处理中文。如果想给界面中的英文单独设置字体,那么英文的字体必须写在中文的前面。
快捷键:ff font-family:;
5.文字属性的简写
格式:font:style weight size family
注意点:
1)在这种缩写格式中有点属性值可以省略,style、weight可以省略。
2)在这种缩写格式中style和weight的位置可以交换。
3)在这种缩写格式中有点属性是不可以省略的,size、family是不可以省略的。
4)size和family的位置是不能随便乱放的,size一定要在family的前面,而且size和family必须写在所有属性的最后。
文本属性
- 文本装饰的属性
格式:text-decoration:underline;取值:underline 下划线、 line-through 删除线、overline 上划线、去掉超链接的下划线 - 文本水平对齐的属性
格式:text-align:left;取值:left 左、right 右、center 中 - 文本缩进的属性
格式:text-indent:2em;取值:2em,其中em是单位,一个em代表缩进一个文字的宽度
颜色属性
- 文本装饰的属性
格式:color:值;
取值:1)英文单词:常见的颜色都有对应的英文单词,但是不是所有颜色都能用英文单词来表达,是有限制的。
2)rgb,其实就是三原色,r(red)、g(green)、b(blue),格式:rgb(0,0,0)
常见颜色:红色:rgb(255,0,0) 绿色:rgb(0,255,0) 蓝色:rgb(0,0,255) 黑色:rgb(0,0,0) 白色:rgb(255,255,255)
注意:在前端开发中其实不常用黑色,只要让红色、绿色、蓝色的值都一样就是灰色,而且如果这三个值越小那么就越偏黑色,越大就越偏白色。
3)rgba,与rgb差不多一样,多出来的a代表透明度,取值是0到1,取值越小就越透明
4)十六进制,其实本质就是RGB十六进制中是通过每两位表示一个颜色,例如:#FFEE00 FF表示R EE表示G 00表示B

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">
CSS(1)的更多相关文章
- 前端学习 第五弹: CSS (一)
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- CSS——(2)与标准流盒模型
部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...
- 前端总结·基础篇·CSS(一)布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- 前端总结·基础篇·CSS(三)补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
- CSS(一) 引入方式 选择器 权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
- CSS(选择器)
CSS(选择器) 作用:用于匹配 HTML 元素 选择器分类: 1.元素选择器 a{} 2.伪元素选择器 ::before{} (真实存在的元素) 3.类选择器 .link{} 4.属性选择 ...
- CSS——(2)盒子模型与标准流
上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...
- ASP.NET动态网站制作(3)--css(2)
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...
- css(一)
CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式 ...
随机推荐
- RedisCluster的rename机制失败报错,解决又是数据倾斜问题
需求说明:spring session中的用户session更新是更新key的名字,所以对于key的操作时需要用newkey 替换oldkey value值只允许存在一个,这里用到rename就很合适 ...
- 编写订单支付api中遇到的问题
首先我是按照已经有的已经有的支付api去编写订单支付api,但是由于两者是有区别的,所以类似去搬用难免会出问题,首先我是套用已经写好的model,然后写相应的serializer,实现序列化之后就开始 ...
- trap - 在脚本中处理信号
一:用途说明 trap命令是shell内建的命令,它用在脚本中指定信号如何处理. 比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是 ...
- 【Java】深拷贝和浅拷贝
Java中的对象拷贝(Object Copy)指的是将一个对象的所有属性(成员变量)拷贝到另一个有着相同类类型的对象中去.举例说明:比如,对象A和对象B都属于类S,具有属性a和b.那么对对象A进行拷贝 ...
- phpcms站点部署
1 wamp部署使用wamp2.4以下版本. 2.4版本自带的php5.4以上底层变化,phpcms运行不了. 2.2版自带的php5.3.10可以兼容. 2 安装配置时,尽量为每个站点配置(http ...
- 火狐谷歌webdriver驱动地址
ChormeDrive下载 打开百度搜索Chromedriver官网下载,点击进入这个页面,链接为:http://npm.taobao.org/mirrors/chromedriver/2.41/ ...
- 关于 or 判断都是Ture的问题
问题: 1. ret1 = [1, 2, 3, 4] if 11 or 33 in ret1: print("ok") else: print("no") 2. ...
- centOS下实践查询版本/CPU/内存/硬盘容量等硬件信息
更详细参考: https://blog.csdn.net/dream_broken/article/details/52883883 1.查看内存 DirectMap2M: 33544192 kB [ ...
- Centos 下 Apache 原生 Hbase + Phoenix 集群安装(转载)
前置条件 各软件版本:hadoop-2.7.7.hbase-2.1.5 .jdk1.8.0_211.zookeeper-3.4.10.apache-phoenix-5.0.0-HBase-2.0-bi ...
- 定位的盒子叠放顺序z-index
1.正常情况,按照顺序,最后的盒子在最上面,默认z-index为02.当使用z-index,数字越大,越优先显示在上面3.注意,只要定位的盒子才可以使用该方法 <body> <div ...