1，文本

文本颜色：

<style>

body {color:red;}    /*为body的所有字体设置字体颜色为红色*/

h1 {color:#00ff00;}    /*为h1元素设置字体颜色，这种表示方法是十六进制表示法*/

p.ex {color:rgb(0,0,255);}    /*为所有class等于“ex”的p元素设置字体颜色为xxx，这是红绿蓝三原色表示法，另外css中，id用井号设置格式，class用英文句号*/

</style>

文本对齐方式：

h1 {text-align:center;}    /*居中对齐*/

p.date {text-align:right;}    /*左对齐*/

p.main {text-align:justify;}    /*就像word中的文本自动对齐一样，justify自动两端对齐*/

文本修饰：

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

a {text-decoration:none;}    /*为a元素设置没有文本装饰*/

</style>

</head>

<body>

<p>链接到: <a href="http://www.runoob.com/">runoob.com</a></p>    /*原本a元素链接是自带下划线的，但是由于a的不带装饰属性，所以网页上显示的链接现在已经不带下划线了*/

</body>

/*当然也可以这样*/

<style>
h1 {text-decoration:overline;}    /*头顶上有下划线*/
h2 {text-decoration:line-through;}    /*中间有一条线*/
h3 {text-decoration:underline;}    /*下方有下划线*/
</style>

文本转换：

p.uppercase {text-transform:uppercase;}    /*设置p元素中class等于uppercase的元素全变成大写*/

p.lowercase {text-transform:lowercase;}    /*设置p元素class等于lowercase的元素全部变成小写

p.capitalize {text-transform:capitalize;}    /*设置p元素中class等于capitalize的元素全都变成每个单词首字母大写*/

文本缩进

<style>

p {text-indent:20%;}    /*设置p元素的文本缩进百分之二十，当然了也可以用像素的单位px来*/

</style>

css中与文本有关的属性：

属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写 
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

2，字体

css字体属性定义字体，加粗，大小，文字样式。

字形：分为通用字体系列和特定字体系列。通用字体系列常用：Serif（字体末端加装饰）Sans-serif（字体末端不加装饰）。

字体系列：font-family属性设置文本的字体系列，font-family属性应该设置几个字体名称作为一种后备机制。如果不支持第一种字体，会尝试下一种，注意如果字体名称超过一个词，包括“宋体”这种，要用引号表明。例如：

p{font-family:"Times New Roman", Times, serif;}

字体样式：font-style用于指定字体样式属性，主要是用于指定字体样式属性，比如：正常，斜体，另一种斜体，

p.normal {font-style:normal;}    /*正常*/

p.italic {font-style:italic;}    /*斜体*/

p.oblique {font-style:oblique;}    /*另一种斜体*/

字体大小：font-size用于设置文本的大小，后面的单位可以是px，em，%，默认字体大小为16px也就是1em。

注意一个事情，h1-h6标签也可以改变文字的大小，如果设置不好，容易冲突，另外如果字体大小的单位是px，会造成有些浏览器通过缩放整个页面调整文本大小，要谨慎。

重点讲一讲em单位：为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。因为em是一个可以伸缩的单位。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。px和em单位之间的转换公式：px/16=em。em单位比较完美地实现了在浏览器中调整文本大小的要求，并且由于其可伸缩性和适应移动设备的特性，很受欢迎。用百分比设置文本大小，道理和em差不多。当然为了让我们的字体更加具有可操作性，我们可以使用百分比和em组合来设置文档文字大小：

body {font-size:100%;}    /*整个body标签采用的是默认大小的浏览器字体大小*/

h1 {font-size:2.5em;}    /*标题h1用的是2.5倍的标准大小。以body的字体为标准*/

h2 {font-size:1.875em;}

p {font-size:0.875em;}

字体加粗：font-weight 属性来设置，常见normal，lighter，bold。

p.normal {font-weight:normal;}

p.light {font-weight:lighter;}

p.thick {font-weight:bold;}

p.thicker {font-weight:;}

css字体属性总结：

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。

3，链接

一般的链接可以使用css的任何属性，但是链接有几个特殊的属性，分别是

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
a:link {color:#000000;}      /* 未访问链接，是绿的*/

a:visited {color:#00FF00;}  /* 已访问链接 */

a:hover {color:#FF00FF;}  /* 鼠标移动到链接上，是桃红 */

a:active {color:#0000FF;}  /* 鼠标点击时，是蓝色 */

/*注意格式，它不和别的css设置一样，a标签以后用冒号，这几个属性的顺序也必须遵照此实例*/

设置链接的背景颜色：

a:link {background-color:#B2FF99;}    /*没点击的时候背景是什么颜色*/

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

设置链接的文本修饰：

a:link {text-decoration:none;}    /*文本装饰属性，普通链接没有下划线*/

a:visited {text-decoration:none;}    /*点击过的链接也没有下划线*/

a:hover {text-decoration:underline;}    /*把鼠标放到链接上的时候出现下划线*/

a:active {text-decoration:underline;}    /*点击的时候也有下划线*/

4 列表样式，

html中列表（列表的编号）有两种，一个是无序列表，用圆点标识，一个是有序列表，用123，abc等标识。

<style>

ul.a {list-style-type: circle;}  /*也可以是none*/

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

/*前两者是无序的编号，标识符是空心圆圈或者是方块，后俩是有序的编号，是大写的罗马序号和小写的英文字母*/

</style>

<body>

<p>编号列表写法是这样的</p>

<ul class="a">    /*列表元素的标识符*/

<li>apple</li>    /*第一列*/

<li>banana</li>

<li>orange</li>

</ul>

</body>

用图像作为列表编号的标记符：

ul

{

list-style-image: url('sqpurple.gif');

}

css列表属性：

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中，顺序：list-style-type,list-style-position,list-style-image
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

5 table

<style>

table,th,td

{

    border:1px solid black;    //不加“silid black”会不显示边框

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>    //顺便说一句，th是table head，tr表示横排，td表示单元格

<th>Lastname</th>

</tr>

<tr>

<td>Peter jdalhddbs hdkddbf</td>    //请注意，上表有双边框，因为th和td都有边框

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

</tr>

</table>

</body>

如果想设置单边框，请这样设置：

table

{

border-collapse:collapse;

}

table,th, td

{

border: 1px solid black;

}

设置表格宽度高度：

table    //整个表格的宽度都是100%

{

width:100%;

}

th    //整个表格的表头高度都是50px

{

height:50px;

}

设置表格的文字对其方式：

td

{

text-align:right;    //左对齐右对齐

}
th
{
vertical-align:top;    //顶端对其，底端对齐（bottom）
}

设置边框内部的大小：

td

{

padding:15px;

}

padding 属性设置元素的内边距。

padding 属性定义元素边框与元素内容之间的空间。

该属性可采取 4 个值：

如果规定一个值，比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。

如果规定两个值，比如 div {padding: 50px 10px} - 上下内边距是 50 px，左右内边距是 10 px。

如果规定三个值，比如 div {padding: 50px 10px 20px} - 上内边距是 50 px，左右内边距是 10 px，下内边距是 20 px。

如果规定四个值，比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px，右内边距是 10 px，下内边距是 20 px，左内边距是 30 px。

设置表格的颜色：

table, td, th

{

border:1px solid green;    //边框的颜色

}

th

{

background-color:green;    //表头的背景颜色是绿色

color:white;    //表头的字体颜色是白色

}

css基础二的更多相关文章

  1. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  2. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  3. CSS 基础（二）

    本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...

  4. 两天学会css基础（二）

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

  5. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  6. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  7. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  8. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  9. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

随机推荐

  1. fastjson List转JSONArray以及JSONArray转List

    1.fastjson  List转JSONArrayList<T> list = new ArrayList<T>();JSONArray array= JSONArray.p ...

  2. HyperLedger Fabric ChainCode开发——shim.ChaincodeStubInterface用法

    深蓝前几篇博客讲了Fabric的环境搭建,在环境搭建好后,我们就可以进行Fabric的开发工作了.Fabric的开发主要分成2部分,ChainCode链上代码开发和基于SDK的Application开 ...

  3. 双字节验证：vue输入框中英文字数长度验证

    export default { data() { let validcodeName=(rule,value,callback)=>{ //替换双字节汉字,为aa,限制输入框长度: if(va ...

  4. c++学习之初话 函数指针和函数对象 的因缘

    函数指针可以方便我们调用函数,但采用函数对象,更能体现c++面向对象的程序特性. 函数对象的本质:()运算符的重载.我们通过一段代码来感受函数指针和函数对象的使用: int AddFunc(int a ...

  5. Kubernetes — 重新认识Docker容器

    这一次,我要用+Docker+部署一个用+Python+编写的+Web+应用.这个应用的代码部分(app.py)非常简单: from flask import Flask import socket ...

  6. lr12 websocket

    loadrunner12以上版本支持websocket,在http/html协议录制时可以直接录制websocket相关内容信息. 网上找的一个测试websocket网址:http://www.blu ...

  7. SqlServer如何判断字段中是否含有汉字?

    --/* --unicode编码范围: --汉字:[0x4e00,0x9fa5](或十进制[19968,40869]) --数字:[0x30,0x39](或十进制[48, 57]) --小写字母:[0 ...

  8. [转帖]ORA-03113解决方法

    ORA-03113解决方法 https://www.cnblogs.com/xwdreamer/p/3910264.html 同事遇到过很多次 之前懒的处理 这次看到这个blog 下次遇到了 处理一下 ...

  9. T66597 小xzy的任务 题解

    T66597 小xzy的任务 题目背景 今天,小xzy的班主任交给他一个严肃的任务,匹配羽毛球运动员! ! ! 题目描述 羽毛球队有男女运动员各n人.给定2个n×n矩阵P和Q.Pij​是男运动员i和女 ...

  10. Python——列表、元祖、字典 操作方法

    一.编码方式占位 1.ASCII码:字母.数字.特殊字符,1个字节占8位 2.Unicode:字母 2字节占16位  /  中文 4字节 占32位 3.UTF8:字母 1字节占8位 / 欧洲 2字节占 ...