一、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颜色、单位、文本样式的更多相关文章

  1. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  2. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

  3. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  4. CSS颜色及文本字体

    CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...

  5. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  6. 前端之css引入方式/长度及颜色单位/常用样式

    1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

  7. [Web 前端] 009 css 常用的文本样式设置

    常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...

  8. css颜色单位

    /* 用颜色的单词表示不同的颜色:red, green, blue等等 */ p { background-color: red; } /* 用rgb三元色表示,rgb => red, gree ...

  9. 7. CSS装饰网页的样式

    CSS中有哪些用来装饰网页的样式呢?在这里我们对一些常用的样式做了总结. 字体样式 /* * 一般样式书写 */ .font_style_1{ font-family: "华文行楷" ...

随机推荐

  1. /cygdrive/c/MinGW/bin/autoconf-2.68: line 501: /mingw/bin/autom4te-2.68: No such file or directory

    出现如下错误 编译openssh的时候 # autoconf /cygdrive/c/MinGW/bin/autoconf-2.68: line 501: /mingw/bin/autom4te-2. ...

  2. centos 下创建本地镜像源,结合 nginx

    1. 创建同步文件 参考清华的Centos源,配置同步文件.https://mirrors.tuna.tsinghua.edu.cn/help/centos/ [root@localhost cent ...

  3. [视频教程] 使用composer安装使用thinkphp6.0框架

    安装composer -vvv的参数是表示展示安装进度,测试时使用其他参数安装失败,一直卡着不动curl -vvv https://getcomposer.org/installer | phpmv ...

  4. 5-2可视化库Seaborn-调色板

    In [1]: import numpy as np import seaborn as sns import matplotlib.pyplot as plt %matplotlib inline ...

  5. Java面试中遇到的坑【篇二面试干货】

    俗话说早起的鸟儿有虫吃,现在临年关越来越近,有跳槽的想法的同事也都打算年前做好功课年后入职,所谓年终奖拿了,工作换的也是水到渠成. 说到这里想必有同学要说了,年底了放着年终奖不拿为何要跳槽呢?这个就要 ...

  6. VLAN实验(5)三层交换

    1.选择1台S5700和3台pc机,并根据实验编址完成此拓扑图. 2.检查连通性 (1)因为mengyu-PC1和mengyu-PC2在一个地址段上,可以ping通 (2)因为mengyu-PC1和m ...

  7. JSX中引用CSS的一种方法

    第一步:在page或者pages目录下新建一个css文件,例如style.css: 第二步:在jsx页面中import该css文件,例如: import style from './style.css ...

  8. Linux宝塔安装步骤

    首先:先运行 X shell 一:输入命令 Centos安装命令(一般都用这个): yum install -y wget && wget -O install.sh http://d ...

  9. 第09组 Beta版本演示

    组长博客 本组(组名)所有成员 短学号 姓名 2236 王耀鑫(组长) 2210 陈超颖 2209 陈湘怡 2228 许培荣 2204 滕佳 2205 何佳琳 2237 沈梓耀 2233 陈志荣 22 ...

  10. weblogic 12c 安装与下载

    转   一.WebLogic的介绍     WebLogic是美国bea公司出品的一个application server,确切的说是一个基于Javaee架构的中间件,纯java开发的,最新版本Web ...