<!--
第1部分 尺寸与框模型 略
第2部分背景设置
2.1 背景颜色:background-color:value
2.2 背景图片:background-image
body{
background-image:url("image/bg_01.gif");
} 2.3 背景重复background-repead
-repeat-x:仅在水平方向重复
-repeat-y:仅在垂直方向重复
-no-repeat:仅显示一次
2.4 背景定位 background-position 改变图像在背景中的位置 2.5背景图片的固定 background-attachment:value
默认值是 scroll:背景会随着文档滚动
可取值为 fixed:背景固定不动,不会随着页面其他部分滚动而滚动,常用于水印 第3部分 文本格式化
指定字体: -font-family:value1,vlues2;
字体大小:-font-size:value;
字体加粗:-font-weight:normal/bold;
文本颜色:-color:value;
文本排列: -text-align:left/right/center;
文字修饰:-text-decoration:none/underline;
行高:-line-height:value;
首行文本缩进:-text-indent:value; 第4部分 表格样式
4.1
边距属性:padding
尺寸属性 :width,height
文本格式属性:略
背景属性:设置表格或者单元格的背景颜色或者被禁图像
border属性:设置表格的边框
垂直居中:vertical-align:top/middle/bottom; 4.2表格特有属性
4.2.1 边框合并:如果设置了单元格的边框,相邻单元格的边框会单独显示,相当于双边框,
合并相邻的边框 border-collapse:separate/collapse;
4.2.2 边框边距(仅适用于边框分离模式也即border-collapse的值为separate):
border-spacing:
指定一个值:该值同事适用于水平和垂直间距
指定两个值:第一个指定水平间距,第二个值指定垂直间距,且两个值之间用空格隔开 第5部分 浮动定位
5.1
普通定位:
浮动定位:
定义元素在哪个方向浮动; float:none/left/right;
用于清除浮动带来的影响,可以指定哪边:clear: none/left/right/both;
相对定位:
绝对定位: 第6部分 显示方式
6.1 一切皆为框:页面上的元素都可以显示为框
块级元素如,div> <h1> <p>等,这些块级元素显示为一块内容,即“块框”
内联元素/行内元素:如<span> <a> 等,内容显示在行内,即“行内框”
display:none/block/inline;
none 让生成的元素没有边框,该框及其所有内容不再显示,不占用文本中的空间
block 让行内元素表现得想块级元素一样
inline 让块级元素表现得像内联元素一样
6.2光标
cursor属性
default
pointer
crosshair
text
wait
help等 第7列表样式
7.1 列表样式标志:list-style-type
用于控制列表中列表项标志的样式
无需列表:出现在各列表项旁边的圆圈点
有序列表:可能是字母、数字或其他计数体系中的一个符号 无序列表取值:
none:无标记
disc:实心圆,为默认值
circle:空心圆
square:实心方块
有序列表:
none:无标记
decimal:数字(如1,2,3,4,5),为默认值
lower-roman:小写罗马数字
upper-roman:大写罗马数字

7.2 列表项图像 list-style-image属性使用图像来替换列表项的标记
取值为:url(),指定图像作为有序或无序列表的标志 第8部分 定位
8.1定位属性:
position 规定元素的定位类型,可取值:static/relative/absolute/fixed
偏移属性 top,bottom,left,right属性,用于定义远古三矿的便宜位置
z-index 设置元素的堆叠顺序
float/clear 浮动定位属性 --> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day03</title>
<style>
/*第1部分 尺寸与框模型*/
div{
width:180px; /*长*/
height:160px; /*高*/
color:red; /*字体颜色*/
background:#ffffff; /*背景颜色*/
border:2px solid black;/*边界的 宽度 样式 颜色 */
text-indent:10px; /*首行缩进10px*/
} div.class_1{
width:80px;
height:60px; border:1px solid black;
} div.hidden{overflow:hidden;}
div.scroll{overflow:scroll;}
div.auto{overflow:auto;} input.btn{
width:90px;
height:30px;
color:red; } div.box{
width:250;
height:250;
padding:10px;/*内容与框线之间的距离
padding-top/right/bottom/left:value
*/
margin:0 auto; /*与下一个元素的空间量,可以取值为auto由浏览器计算外边框
-margin-top/right/bottom/left:value
*/
border:3px solid red; } h1.p1{
text-align:center; /*文本居中 */
} table{
width:200px;
border:2px solid black;
border-collapse:collapse; /*单元格边框合并 */ }
td{
height:50px;
border:3px solid red;
vertical-align:middle;
} </style> </head> <body>
<div class="class_1" >
默认显示,即使超出尺寸,也显示全部内容
</div><br/><br/> <div class="hidden" >文本超出尺寸限制,隐藏文本;
凑字数:斤斤计较多军军家家户户或或或或家具家电军军多多多多顶顶顶顶
哒哒哒哒哒哒多多多多么么么么么么么木木木木不不不不不不不不
哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多
</div><br/><br/> <div class="scroll" >文本超出尺寸限制,可以拉滚动条查看,
不超出限制,也显示滚动条;
凑字数:斤斤计较多军军家家户户或或或或家具家电军军多多多
</div><br/><br/> <div class="auto" >文本超出尺寸限制,可以拉滚动条查看,不超出尺寸没有滚动条;
凑字数:斤斤计较多军军家家户户或或或或家具家电军军多多多多顶顶顶顶
</div>
<input class="btn" type="button" value="登录">
<div class="box"> 外边框 </div> <h1 class="p1">文本居中演示</h1> <table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr> <tr>
<td>Kwin</td>
<td>23</td>
</tr> </table> </body>
</html>

CSS部分语法2的更多相关文章

  1. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

  2. 1.css的语法标准

    css(Cascading Style Sheets),中文名称为层叠样式表,主要用于对html的样式设置. 在使用CSS的时候,要注意其优先级情况,优先级由下所示(数字越高,优先级越高): 浏览器缺 ...

  3. 常用的CSS缩写语法一些方法小结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...

  4. CSS代码语法

    css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到 ...

  5. css 基本语法及页面引用:

    css基本语法: css的定义方法是: 选择器{ 属性:值; 属性:值; 属性:值; } 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个值. 如: div{ w ...

  6. css基本语法及页面引用

    css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值.代码示例: div{ w ...

  7. web(七)css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  8. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  9. HTML&CSS基础-CSS的语法

    HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...

  10. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

随机推荐

  1. 二进制安装 mariadb

    默认路径安装MySQL,Mariadb 非常简单,解压,配置权限,修改配置文件基本即可使用:自定义安装稍微有点麻烦,需要修改的地方稍微多点: 下面详细介绍自定义目录,二进制安装mariadb, 使用传 ...

  2. 【题解】UVA11362 Phone List

    Tags : ​ 排序,字典树 ​ 从短到长排序,逐个插入字典树.若与已有的重复,返回错误信息. #include <iostream> #include <stdio.h> ...

  3. df、du命令

     EXT3  最多只能支持32TB的文件系统和2TB的文件,实际只能容纳2TB的文件系统和16GB的文件 Ext3目前只支持32000个子目录 Ext3文件系统使用32位空间记录块数量和i-节点数量 ...

  4. flask wtforms组件详解

    一.简介 在flask内部并没有提供全面的表单验证,所以当我们不借助第三方插件来处理时候代码会显得混乱,而官方推荐的一个表单验证插件就是wtforms.wtfroms是一个支持多种web框架的form ...

  5. vpshere6 ESXI 禁止登陆 "执行此操作的权限被拒绝"

    vCenter在添加ESXI主机时,锁定模式选择“正常”,导致无法直接登陆ESXI宿主机,现象如下: 解决方法:

  6. 我的工具:Db SQL Monitor

    SQL Monitor 是一款界面简洁.绿色小巧的sql活动监视器,它能够帮助用户对 SQL Server 运行进程和Job进行实时监视,您可以查看当前执行的SQL/命令并终止. 工具下载地址:htt ...

  7. ecshop 商品属性显示方法

    功能:在商品列表上,点击放大镜,显示商品所有属性以及其价格,效果如下: 方法/步骤: 1.编辑\admin\templates\goods_list.htm 模板,在 <!-- 商品搜索 --& ...

  8. this.$router.push、replace、go的区别

    1.this.$router.push() 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面. 用法: 2.this.$router.replace() ...

  9. SpringMVC的各种注解

    @RequestMapping 这个注解标注在方法名上,如 /** * 拦截所有请求: * @RequestMapping(value="/*", method = {Reques ...

  10. MySQL数据库存储引擎

    这里主要介绍最常用的两种存储引擎. 1.InnoDB InnoDB是一个事务型的存储引擎,有行级锁定和外键约束.Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别,关 ...