CSS颜色、单位、文本样式
一、CSS颜色:
关键字 red
16进制的6位 #ffffff
16进制的3位 #fff
rgb(0,255,100) 取值范围:0~255 (r:red、g:green、b:blue)
rgba(0,255,100,0.5) 最后值a表示为颜色的透明度 取值范围:0~1
二、CSS单位:
px 绝对单位
em 相对单位 相对于浏览器的默认的font-size的大小16px 则1em=16px
手动修改了body的font-size的大小为20px 则1em=20px
rem 相对单位 1rem=16px,与font-size没有关系
百分比% 当前元素占父类元素的百分比
三、CSS中的文本样式:
a.font属性:
1.字体类型:
font-family:字体属性值(宋体、cursive【草书】、微软雅黑 等)
字体栈(属性值前面的不支持则依次向后取值):
font-family:cursive,宋体,serif
如果需要使用网上字体,则相应代码如下:
/*网络字体,写在需要使用网络字体的选择器代码块中*/
font-family:webfont; /*声明字体家族,其不包含在任何选择器样式代码块里面*/
@font-face{
/*字体家族名字*/
font-family: 'webfont';
/*地址*/
src:url('./font/1.ttf');
}
2.字体倾斜:
font-style:属性值(normal【正常】、italic【倾斜】、oblique【模拟倾斜】)
3.字体粗细:
font-weight:属性值(normal【正常】、bold【加粗】、lighter【比父元素更细】、bloder【比父元素更粗】、取数值范围:100~900)
4.字体变形(大小写)
text-transform:属性值(none、uppercase【全大写】、lowercase【全小写】、capitalize【首字母大写】、full-width【单个字体等宽】)
b.text属性:
1.文本修饰:
text-decoration:属性值(none、underline【下划线】、overline【上划线】、line-through【删除线】、)
文本取值样式线条对应的属性:
a.text-decoration-color:颜色值
b.text-decoration-style:属性值(wavy【波浪线】、double【双实线】)
c.text-decoration-line:属性值(line-through【删除线】)
2.文本阴影:
text-shadow: 23px 23px 1px #ccc,0px 13px 1px coral; 文本阴影 【 x方向偏移 y方向偏移 模糊距离(清晰度) 阴影颜色】
c.list属性:
1.列表项目编号类型:
list-style-type:属性值(none【去除项目编号】、disc【黑圆点】、decimal【数值】等等)
2.列表图片编号:
list-style-image:url(对应图片路径)
3.列表项目编号位置:(默认为:outside;是否包含在li标签内)
list-style-position:属性值(outside、inside)
4.列表类型:
list-style:disc url(图片路径) inside; (list-style:[<type>] [<image>] [<position>];)
list-style:none;
d.line-height属性:
对设置了宽高的元素
--使用text-align:center;(内部文本水平居中)
--使用line-height:元素高度;(内部文本垂直居中)
CSS颜色、单位、文本样式的更多相关文章
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- 【CSS学习】--- 文本样式
一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- CSS颜色及文本字体
CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- [Web 前端] 009 css 常用的文本样式设置
常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...
- css颜色单位
/* 用颜色的单词表示不同的颜色:red, green, blue等等 */ p { background-color: red; } /* 用rgb三元色表示,rgb => red, gree ...
- 7. CSS装饰网页的样式
CSS中有哪些用来装饰网页的样式呢?在这里我们对一些常用的样式做了总结. 字体样式 /* * 一般样式书写 */ .font_style_1{ font-family: "华文行楷" ...
随机推荐
- [日常] 安装windows+deepin双系统
我的测试电脑上安装了三个系统,分别是win7 , ubuntu16.04 ,deepin15.11下面的步骤是安装deepin系统的过程 1.制作启动u盘,直接使用官方工具制作就可以了,我的已经制作好 ...
- [PHP] 近期接手現有的企邮前端框架业务所遇困难
1.邮箱前端有三大产品线,包括免费邮箱,VIP邮箱,企业邮箱,使用的一套代码,在代码中进行的逻辑判断处理,根据不同的配置进行不同的业务操作.有很多逻辑是各产品线是不同的,需要仔细开发和判断才能不会影响 ...
- nginx典型官方模块解释
模块名称 作用 语法 默认 配置位置 配置举例 结果验证 备注 1 --with-http_stub_status_module 监控Nginx的服务器连接状态 stub_status serve ...
- 借助meta影藏顶部菜单
1===>报错 Cannot find module 'webpack/lib/Chunk' 删除node_modules 然后重新下载 4==> 现在已进入页面,底部就有四个菜单,在点击 ...
- vue之tab切换
<style> .active{ color: red; } div a{ display: block; } </style> <script src="ht ...
- 13.Java基础_数组内存图
单个数组内存图 new int[3]: 在堆内存里申请一块空间存储int类型的变量(初始化时值都为0) int[] array: 在栈内存申请一块内存存储堆内存里数组的首地址 array[i]: 通过 ...
- c# 第21节 方法声明和调用
本节内容: 1:为什么要有方法 2:方法的声明及使用 3:方法params 传入接收数组 4:值传递和引用传递 5:输出参数out 1:为什么要有方法 2:方法的声明及使用 声明实例: 3:方法par ...
- [ZJOI2019] 开关 (一种扩展性较高的做法)
[ZJOI2019] 开关 (一种扩展性较高的做法) 题意: 有n个开关,一开始状态都为关闭.每次随机选出一个开关将其状态改变,选出第i个开关的概率为${ p_i \over \sum_{i=1}^n ...
- Python连载41-yield from详解、委派生成器
一. 1.yield from (1)调用协程为了得到返回值,协程必须正常终止 (2)生成器正常终止会发出StopIteration异常,异常对象的value属性保存返回值. (3)yield fro ...
- Python连载34-信息队列
一.生产者消费者模型 1.一个模型.可以用来搭建消息队列:queue是一个用来存放变量的数据结构,特点是:先进先出 import threading import time import queue ...