11.21 CSS学习-上午
font-family:设置文本的字体序列,应当多设置几个,作为后备机制,如果浏览器不支持第一种字体,它将尝试下一种字体。
字体序列的名字超过一个字需要使用引号,多个字体序列用逗号分隔指明:
{font-family:'Times New Roman',SansSerif;}
font-style字体样式:指定斜体文字的字体样式
1)正常:normal;2)斜体:italic;3)倾斜的文字:oblique
{font-style: italic;}
font-size设置文本的字体大小:严格把控字体的大小才能够是页面开起来美观
{font-size: 30px;}
font-weight进行字体加粗:bold,bolder,normal,
{font-weight: bold;}
link链接:不同的链接有不同的样式,有四种链接状态
a:link -正常,未访问过的链接
a:visited -用户已经访问过的链接
a:hover -当用户鼠标放在链接上时
a:active -链接被点击的那一刻
background-color:链接背景色
text-decoration:链接修饰,主要是下划线
a:link{
color: burlywood;
text-decoration: none;
}
a:visited{
color: #FF0000;
text-decoration: none;
}
a:hover{
color: blueviolet;
text-decoration: underline;
}
a:active{
color: darkmagenta;
}
列表:有序列表、无序列表
list-style-type:指定列表项标记的类型(ul:无序;ol:有序)
ul.animal{
list-style-type: square;
}
ul.trans{
list-style-type: circle;
}
表格填充:padding,如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性。设置内边距,按照顺时针的方式走,上右下左
td
{
padding:15px;
}
表格边框:border
table, th, td
{
border: 1px solid black;
}
表格折叠:collapse,指定表格的边框是否被折叠成一个单一的边框,border-collapse:collapse
table
{
border-collapse:collapse;
}
表格的宽度和高度:100%的宽度,50像素的高度
table
{
width:100%;
}
th
{
height:50px;
}
表格中的文本对齐
td
{
text-align:left;
}
指定边框的颜色,th元素的文本和背景色
table, td, th{
border: 1px solid green;
border-collapse: collapse;
}
th{
background-color: green;
color: white;
// width:占屏幕宽度的20%
width: 20%;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" content="This is a meta data" name="yexun">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="home.html">
<style>
body { }
a:link{
color: burlywood;
text-decoration: none;
}
a:visited{
color: #FF0000;
text-decoration: none;
}
a:hover{
color: blueviolet;
text-decoration: underline;
}
a:active{
color: darkmagenta;
}
p {
font-family: SansSerif, 'Times New Roman';
font-size: 30px;
font-style: italic;
font-weight: bold;
}
{# h1 {#}
{# color: cornflowerblue;#}
{# text-align: center;#}
{# }#}
#hcolor {
color: aquamarine;
letter-spacing: 2px;
text-align: center;
text-shadow: 2px 2px #FF0000;
}
#getIn {
height: 20px;
width: 100px;
background-color: burlywood;
}
ul.animal{
list-style-type: square;
}
ul.trans{
list-style-type: circle;
}
#info{
font-family: SansSerif;
width: 40%;
border-collapse: collapse;
}
#info td, #info th{
font-size: 1em;
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;
}
#info th{
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom:4px;
background-color: #a7c942;
color: #ffffff;
}
#info tr.alt td{
color: #000000;
background-color: #eaf2d3;
}
</style>
</head>
<body>
<input id="getIn" type="text" name="one"/>
<script>
document.write('hello!')
</script>
<ul class="animal">
<li>cat</li>
<li>dog</li>
<li>pig</li>
</ul>
<ul class="trans">
<li>bike</li>
<li>car</li>
<li>plane</li>
</ul>
<table>
<tr>
<th>list_01</th>
<th>list_02</th>
<th>list_03</th>
</tr>
<tr>
<td>dog</td>
<td>cat</td>
<td>bird</td>
</tr>
<tr>
<td>flower</td>
<td>green</td>
<td>blue</td>
</tr>
</table>
<br> <table id="info">
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr class="alt">
<td>Brown</td>
<td>23</td>
<td>male</td>
</tr>
<tr>
<td>Alice</td>
<td>18</td>
<td>female</td>
</tr>
<tr class="alt">
<td>Bob</td>
<td>33</td>
<td>male</td>
</tr>
<tr>
<td>Tom</td>
<td>17</td>
<td>male</td>
</tr>
<tr class="alt">
<td>Jerry</td>
<td>18</td>
<td>female</td>
</tr>
<tr>
<td>King</td>
<td>5</td>
<td>male</td>
</tr>
</table>
</body>
</html>
页面显示
11.21 CSS学习-上午的更多相关文章
- 11.21 CSS学习-下午
CSS框模型,看似一个盒子,封装周围的HTML元素,包括:边距.边框.填充和实际内容Margin:清除边框区域,没有背景色,完全透明Border:边框周围的填充和内容,边框是受到盒子的背景色影响Pad ...
- 11个实用的CSS学习工具
1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- [转]CSS学习笔记
原文:http://www.fx114.net/qa-266-93710.aspx 01.什么是CSS. CSS指层叠样式表(Cascading Style Sheets). ·样式定义如 ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
- CSS:CSS学习总结
CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...
- HTML&CSS 学习网站收藏【转】
转自:http://lab.linxz.de/some_url.html html & CSS http://www.adobe.com/devnet/html5/articles/css3- ...
- HTML与CSS学习记录
title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...
随机推荐
- ab压测札记(Apache Bench)
1 ab安装 ab实际上是apache httpd里面的一个工具或者说子模块,安装apache httpd可以参考另一篇文章JBOSS集群的2.3节 安装目录:/apache目录/bin/,如下 2 ...
- 如何下载腾讯视频的视频转为MP4常用格式视频
想起之前看过中央一台的<我要上春晚>中有个节目叫<迎春花>,两个女孩表现特别好,想下载这个视频,然后发现CCTV提供的客户端不好用,腾讯视频有,但是腾讯视频下载下来是qlv格式 ...
- cocos2d-x 3.0 在C++中调用lua函数
代码用的是<cocos2d-x 3.0 在lua中调用自定义类>中的代码. 在上篇的基础上进行扩充. 写lua函数 local function process_packet(user_d ...
- iOS App Extensions
一.扩展概述 扩展(Extension)是iOS 8中引入的一个非常重要的新特性.扩展让app之间的数据交互成为可能.用户可以在app中使用其他应用提供的功能,而无需离开当前的应用. 在iOS 8系统 ...
- Weblogic(CVE-2017-10271)漏洞复现
WebLogic XMLDecoder反序列化漏洞(CVE-2017-10271) 漏洞编号:CVE-2017-10271 漏洞描述:WebLogic WLS组件中存在CVE-2017-10271远程 ...
- SVN 快速入门
一.SVN 简介 (1) SVN 是 Subversion 的缩写,是一个开源的版本控制系统(2) SVN 基于 C/S 架构,有一台中央服务器,多台客户端通过网络从中央服务器拉取或提交代码,以此达到 ...
- HTML 水平线
<hr /> 标签可以在 HTML 页面中创建水平线,通常用来分隔文章中的小节 <!DOCTYPE HTML> <html> <body> <p& ...
- 最简单的GLSL,Shader
Vertex Shader void main() { gl_FrontColor = gl_Color; gl_Position = ftransform(); } Fragment Shader ...
- map 集合的遍历
List<Map<String,Object>> autoReplyList= wechatService.queryAutoReplyByOrg(orgId); for(Ma ...
- TCPdump指定时间或者指定大小进行循环抓取报文
背景:我们用tcpdump工具循环抓取网卡上的报文,我们会遇到如下情况: 1. 抓取报文后隔指定的时间保存一次: 2. 抓取报文后达到指定的大小保存一次: 本文就这两种情况给出tcpdump的使用方法 ...