css基础二
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基础二的更多相关文章
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- CSS 基础(二)
本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...
- 两天学会css基础(二)
接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象(Media Object)
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
随机推荐
- CentOS 6.5 minimal 安装配置VMware tools
1.登录到系统,切换到root账户 2.配置网络 minimal版本默认不启动网络,所以要自己配置. 配置过程很简单,编辑配置文件 vi /etc/sysconfig/network-script/i ...
- python小白——进阶之路——day4天-———流程控制while if循环
# ### 代码块: 以冒号作为开始,用缩进来划分作用域,这个整体叫做代码块 if 5 == 5: print(1) print(2) # 注意点: 要么全部使用4个空格,要么全部使用1个缩进 ,这样 ...
- Python dict和set的实现原理
在python的dict中间进行查找某个key操作时,查找所需时间不会随着dict中键值对数量增多而变长,(时间复杂度为O(1))但是list中就会(时间复杂度为O(N)),这是因为list查询实现的 ...
- Java canlendar task
DayPilot for Java - Calendar, Scheduler and Gantt Chart Componentshttps://java.daypilot.org/ AJAX Sc ...
- IdentityServer4【Reference】之Profile Service
Profile Service 当创建令牌或者请求像Userinfo这种端点时,IdentityServer通常会需要用户的标识信息(identity information),默认情况下,Ident ...
- sublime 官方正版,自己用的插件配置,最轻量级安装流程
到了一家新公司,新的办公电脑,移动工作站哦,配置很酷.需要自己安装编码环境,node.js(http-server)是必须要装的,编辑器个人比较喜欢sublime,现在归纳一下配置流程,ps:本人有点 ...
- Lodop、c-lodop注册与角色简短问答
注册与角色:参考http://www.c-lodop.com/demolist/t1.html参考链接里的三种场景,是哪种角色.客户端访问网站后用自己的打印机打印.是客户端本地打印角色.IP和域名注册 ...
- EventBus 线程切换原理
主要问题其实只有两个,其一:如何判断当前发送事件的线程是否是主线程:其二:如何在接收事件时指定线程并执行: 一个一个来看. 1.如何判断是否在主线程发送 EventBus在初始化的时候会初始化一个Ma ...
- Red Hat Enterprise Linux AS4, C++ OCCI connect Oracle 9i
前提是已经安装好Oracle 9i. 1. 下载对应的ORACLE client安装. http://www.oracle.com/technetwork/database/features/inst ...
- Quartus13.1全编译出现引脚错误(神级bug)
BUG现象:分配完管脚后全编译出现如下错误. Error (171172):Detected confilicting assignments for the following nodes.Erro ...