CSS样式表---------第三章:样式属性

三、样式属性

1、背景与前景

background-color:#90; ------------背景色,样式表优先级高。

background-image:url(路径)--------------设置背景图片。

background-repeat:no-repeat;----------------no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺。

background-position:center;-----------------背景图居中,设置背景图位置时,repeat必须为"no-repeat"。

background-position:top;-------------------背景图放到右上角(方位可以自己更改)。

background-position:left 100px top 200px;-------------------离左边100像素,离上边200像素(可以设为负值)。

background-attachment:fixed;-----------------------------背景是固定的,不随字体滚动。

background-attachment:scroll;------------------------------背景随字体滚动。

2、字体

font-family:"新宋体";------------------------------------字体。

font-size:12px;---------------------------------------字体大小。常用像素12px、14px、18px、还可以用"em","2.5em"即:默认字体的2.5倍,还可以用百分数。

font-weight:bold;--------------------------------------bold是加粗,normal是正常。

font-style:italic;-------------------------------------italic是倾斜,normal是正常。

color:#03C;-----------------------------------------颜色。

text-decoration:-------------------------------------underline:下划线,overline:上划线,line-through:删除线,none:去掉下划线。

text-align:-------------------------------------------center:水平居中对齐,left:左对齐,right:右对齐。

vertical-align:-----------------------------------middle:垂直居中对齐,top:顶部对齐,bottom:底部对齐。一般设置行高后使用。

text-indent:28px-------------------------------------首行缩进量。

line-height:24px------------------------------------行高。一般为1.5~2倍字体大小。

3、边界与边框

*注:四个边框的顺序按顺时针方向:上,右,下,左。

border(表格边框、样式等)、 margin(表外间距)、padding(内容与单元格间距)

(1)边框

/*边框设置*/
    border:5px solid blue;(四边框、5像素宽、实线、蓝色)相当于下面三行红的。
    border-width:5px;
    border-style:solid;
    border-color:blue;

    border-top:5px solid blue;
    border-bottom:5px solid blue;
    border-left:5px solid blue;
    border-right:5px solid blue;

(2)边距

    /*四边外边框之间的距离*/
    margin:10px;            ------四边外边框宽度为10像素。auto,居中。
    margin-top:10px;        ------上边外边框宽度为10像素;其他三边边框类似。
    margin:20px 0px 20px 0px;------上-右-下-左,四边外边框顺时针顺序。
    /*内容与边框之间的距离*/
    padding:10px;           --------内容与边框的四边间距为10像素。
    padding-top:10px;       --------内容与边框的上间距为10像素;其他三边间距类似。
    padding:20px 0 20px 0px;--------上-右-下-左,内容与边框的四边间距顺时针顺序。

4、列表与方块

width、height、(top、right、bottom、left)--------------------只有在绝对坐标情况下才能用。

list-style:none;----------取消序号。

list-style:circle;--------序号变为圆圈,样式相当于无序。

list-style-image:url(图片地址);-----------图片做序号。

list-style-position:outside;--------------序号在内容外。

list-style-position:inside;-------------序号跟内容在一起。

5、格式与布局

position:fixed; ------------------------锁定位置(相对于浏览器的位置),上浮不可排列。

position:absolute;---------------------------绝对位置 1、外层没有position:absolute(或relative),那么div相对于浏览器定位 2、如果有,那么div相对于外层边框定位。

position:relative;----------------------相对于默认位置的移动。

float:left; --------------------------------左浮动。

float:right; ------------------------------右浮动

<div style="clear:both"></div> ----------------------截断流。

overflow:hidden;  ---------------------------超出范围时隐藏; soroll,auto超出范围时出滚动条。
    
    display:none;   ------------------------------none,不显示;inline-block,显示为块,不自动换行,宽高可设;

block------------------------------------------显示为块,自动换行;

inline------------------------------------------效果同span标签,不自动换行,宽高不可设。

visibility:hidden;  ----------------------------可视性。hidden,隐藏但是占空间;visible,显示。

z-index:2;---------------------------------上浮到第二层,默认是第一层。

超链接变色:
a:hover
{
    color:red;
}
DIV居中
如何让一个DIV居中对齐?
第一步:设置外层的DIV的text-align:center;
第二步:设置里层的DIV的margin:auto
以上两个DIV都不要设置float.


				
时间: 2024-10-07 20:05:41

CSS样式表---------第三章:样式属性的相关文章

插入css样式表的三种方法

http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档. 外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选择. 在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观. 每个页面使用 <link> 标签链接到样式表. <link> 标签在(文档的)头部: <head>

样式表的基本概念和属性

这两天学习的主要是样式表基础. 样式表根据分类可以分为三种: 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗杂多. 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. 3.外部样式表 新建一个CSS文件,用来放样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表.一般用link连接方式. 控制器有多种多样如: 1.标签选择器(用标签名做选择器) 2.calss选择器(都是"."开头) 3.ID选择器(&q

导入样式表与链入样式表

1.导入样式表@import 使用方法:<style type="text/css">@import "css文件"</style> 2.链入样式表link 使用方法:<link rel="stylesheet" type="text/css" href="css文件" /> 两者的区别: link元素属于HTML级别的,而@import是属于css级别的.在页面运行的时

CSS样式表(三)

前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对象右边的外延边距 margin-bottom 检索或设置对象底边的外延边距 margin-left 检索或设置对象左边的外延边距 argin:检索或设置对象四边的外延边距. 如果提供全部四个参数值,将按上.右.下.左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个,第一个用于上.

css修改 表单placeholder的样式

1.表单中经常出现提示性文字,placeholder是最常用的一种方式,下面就来讲解一下如何设置placeholder的样式 ::-webkit-input-placeholder{  color:red;padding:5px; } :-moz-placeholder{  color:red;padding:5px;   } ::-moz-placeholder{  color:red;padding:5px;   } :-ms-input-placeholder{ color:red;pad

《写给大家看的CSS书》第三章:字体与文本

一.字体与文本 字体与文本的区别: 字体主要涉及文字的大小和外观(可应用于单个字符). 文本主要涉及对字体的处理(只能应用于文本块) 二.指定字体 CSS中指定字体的最简单方式,就是使用五种通用的字体集合 serif :该字体在字符笔画末端有叫做衬线的小细节(Time New Roman.Georgia.Palatino) sans-serif:末端无任何细节(Trebuchet MS.Arial.Verdana) monospace:每个字母宽度相等(例如,i与m具有相同的宽度),通常用于排版

第三章 使用属性升级MyBank

一.==和equals()的区别 1.在java当中,==比较的是内存首地址,equals比较的是两个字符串在内存中的值 2.在C#中,==和Equals()方法的作用相同,比较两个字符串的值,因为当我们使用==的时候,在底层代码中它还是调用了Equals(); 二.访问级别 1.public 公有的 外界任何地方都可以访问到,访问级别最高   2.private 私有的 只能类的内部使用,其他类中访问不到  访问级别最低 三.this关键字   通过this可以访问当前类的所有成员变量和方法

C#语言————第三章 使用属性升级MyBank

********常见的访问修饰符*********: public :公共的,可以在其他类中访问 private:私有的,只有在本类里可以使用,其他的类无权访问 类的默认访问修饰符 internal(同一程序集中的文件内才是可访问的,后期讲) 字段和方法的默认访问修饰符是:private **************值传递和引用传递************* ①:值传递:把参数的值传到方法里面,如果在被调用的方法中对参数的值进行了修改,在方法调用之后,不保留对参数的修改. ②:引用传递:引用传递

如何获取一个元素没有在style和样式表中设置的样式的值?

场景:需要判断一个元素是否是固定定位,但是它的position属性没有设置在该元素的标签style中,如何去判断它的position值为fixed? 措施:通过 window.getComputedStyle(element, [pseudoElt])(pseudoElt可选,表示指定节点的伪元素(:before.:after.:first-line.:first-letter等))的style来判断. 原文地址:https://www.cnblogs.com/juicy-initial/p/1