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学习-上午的更多相关文章

  1. 11.21 CSS学习-下午

    CSS框模型,看似一个盒子,封装周围的HTML元素,包括:边距.边框.填充和实际内容Margin:清除边框区域,没有背景色,完全透明Border:边框周围的填充和内容,边框是受到盒子的背景色影响Pad ...

  2. 11个实用的CSS学习工具

    1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...

  3. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  4. [转]CSS学习笔记

    原文:http://www.fx114.net/qa-266-93710.aspx 01.什么是CSS.    CSS指层叠样式表(Cascading Style Sheets).    ·样式定义如 ...

  5. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  6. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  7. CSS：CSS学习总结

    CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...

  8. HTML&CSS 学习网站收藏【转】

    转自:http://lab.linxz.de/some_url.html html & CSS http://www.adobe.com/devnet/html5/articles/css3- ...

  9. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

随机推荐

  1. Eclipse------如何将项目通过maven编译并打包

    1.右击项目>>>点击Debug As>>>点击 Maven install进行编译,编译成功后入图 2.右击项目>>>点击Debug As> ...

  2. 在Visual Stdio 2012中编译执行JM18.6的方法

    JM是H.264编码的官方实现,与X264开源实现相比,JM的实现比較完整,代码更加规范.并且同一时候提供了编码和解码过程.便于对照分析.可是JM的最大缺点是效率比X264低.因此.非常多应用都基于X ...

  3. NetBpm 目录

    整理了一下网上的一些netbpm,虽然这项目现在不再更新了,还是想去学习一下,这个组件用时候很方便,比workFlow方便的多了 如果像jbpm那样一直更新就好了. 前两篇是个人的一个总结,后面一些是 ...

  4. iOS 解决UIScrollView布局问题（布局受statusBar和NavigationBar影响）

    iOS APP中有一个非常好用的功能,那就是当我们在滚动一个UIScrollView滚动了很远很远的时候,假如我们想让UIScrollView回到顶部,我们绝大多数人的做法就是慢慢慢慢的滚动UIScr ...

  5. >>和<<<区别

    1.>>表示右移(有符号右移),如:15>>2的结果是3,-31>>3的结果是-4,左边以该数的符号位补充,移出的部分将被抛弃. 转为二进制的形式可能更好理解(省略 ...

  6. CentOS下安装vsftpd

    因为FTP的端口是 两个,一个是固定21端口,还有一个任意端口的数据通道.关键是任意端口不好搞. 首先在vsftpd的配置文件中设置 任意端口的范围 [root@localhost root]# vi ...

  7. [Shell] Backtick vs $() 两种方式内嵌值

    使用反撇号(重音符)`command` 和 $(command) 都表示内嵌shell命令. for file in $(ls); do echo $file done for file in `ls ...

  8. vc11(vs2012)下编译php源码

    需要原料: vs2012.php源码 1.本机的mingw没搞定,参考网上文章尝试vs2012编译,借助vs2012自带的命令行工具: 需要去bison官网下载bison.exe放在“c:/windo ...

  9. window下遍历并修改文件

    今天需要写一个遍历文件夹下的所有文件,试了试以前的方法竟然报错了.重新改了一下. #include <iostream> #include <stdlib.h> #includ ...

  10. delphi 函数参数传递 默认参数(传值)、var(传址)、out(输出)、const(常数)四类

    参数可以分为: 默认参数(传值).var(传址).out(输出).const(常数)四类 {默认参数是传值, 不会被改变} function MyF1(x: Integer): Integer; be ...