样式表的样式

在样式表中写样式的时候,样式名的值跟在样式名后面用 : 隔开,每个样式名要用 ; 隔开,并且每个样式最好换行写,如:

#b{
    width:500px;
    height:200px;
    background-color:#00F;
    float:left;
    }

样式简介

1.大小,

  width  表示元素的宽,值可以是100px的数值,也可以是百分数,

  height 表示元素的高,值可以是100px的数值,也可以是百分数,

  注意事项:基本上所有元素都能用width和height来定义大小,只有少数不可以,如<span></span>的大小是自适配内容的,无法定义

       width和height在属性中直接写数值,但是在样式表中要写上单位,px表示像素,em表示相对长度单位。

2.背景,

  background-color 背景色,值可以是16进制颜色编码,也可以是颜色对应的英文单词,

  background-image 背景图,url(地址)用来引入图片,优先级高于背景色

  background-repeat 背景图的平铺方式,默认是repeat平铺,norepeat为不平铺,repeat-x为水平平铺,repeat-y为垂直平铺,

  background-position 背景图的位置,默认是左上角;top顶部与bottom底部(y轴)和left左侧与right右侧(x轴),单独用一个值的话图片会出现在规定方向的最边缘且另一个轴向上是居中的,两个轴向各使用一个则图片会出现在对应的角上,如果想要与边缘有一定的距离,则在想要空出距离的值的后面空格加上想要空出的像素值,如

#e{
    width:500px;
    height:500px;
    background-color:#F00;
    background-repeat:no-repeat;
    background-image:url(../exercise/images/2.jpg);
    background-position:bottom 10px right 20px;
    }

      还可以直接写像素值如 “background-position:50px -30px; ” 前面50px代表水平方向即x轴的移动距离,正值为左移、负值为右移,后面-30px代表垂直方向即y轴的移动距离,正值为下移,负值为上移。

  background-attachment 规定背景图片的滚动方式,默认为scroll滚动,设为fixed为不滚动,即图片不随元素的滚动而变化。

  background-size 背景图片的大小,值可以直接写数值如 “background-size:300px 200px;” 表示图片的宽为300像素,高为200像素,也可以只规定宽高中的一个数值,另一个数值会自动的根据图片的比例对应变化,值设定宽“background-size:300px;” ,只设定高 “background-size:auto 200px;” 。

3.字体

  font-family 字体样式,最常用的网页字体样式是 微软雅黑

  font-size 字体的大小,网页的字体大小默认为16px,前面提到的单位em就是网页的font-size大小,所以默认1em=16px,可以通过 “font-size:62.5%;” 来改变,这时1em=10px

  font-weight 字体的粗细,默认给出100到900的整百数值表示从细到粗,也可以直接写blod表示加粗,

  font-style:italic 表示字体倾斜,

  text-decoration 规定文字是划线方式,underline下划线,overline上划线 ,line-through删除线,常用来给<a></a>超链接去除下划线,

  color 字体的颜色,值可以是16进制颜色编码,也可以是颜色对应的英文单词。

4.对齐方式,值文本的对齐方式

  text-align 文本的水平对齐方式,center水平居中,left左对齐,right右对齐,

  vertical-align  配合 display:table-cell 使用,文本的垂直对齐方式,top置顶,middle居中,bottom沉底,

  line-height 行高,当只有一行文字时,可以直接设置行高等于元素的高度,这样文字在垂直方向就自动居中了,

  text-indent 缩进单位,值可以是数值如32px,表示首行缩进的像素,用于段落的首行缩进。

5.边界边框

  margin表示元素的外边距,即其他元素与本元素之间的间距。

    margin的值可以是4个数值,依次表示上右下左方向的外边距的数值;也可以是两个数值,分别表示上下方向和左右方向的边距;也可以是一个数值,表示4个方向的边距。要注意的是元素是默认出现在左上角的,所以margin也会先显示顶部和左侧。

    也可以通过margin-top  margin-right  margin-bottom  margin-left  来单独设置某一个方向上的外边距

  padding表示内边距,即元素内容与元素边缘之间的间距,内边距值的设置和外边距相同。

    注意事项,内边距是包含在元素里面的,设置了内边距会导致元素变大,

  border表示边框,即元素的边界线,它需要给出三个并列的值,如 border:1px solid red ; ,1px代表边框的粗细,solid代表边框的样式是实线,red代表边框的颜色,

    也可以通过border-top  border-right  border-botton  border-left来单独设置一侧的边框,边框的长度取决于元素本身的长度,即内容+内边距+边框

    注意事项,边框也是包含在元素内的,设置了边框也会使元素变大。

  边距边框和内容之间的关系图,蓝色区域是内容,绿色部分是内边距,橙色部分是边框,黑框内的都属于元素,包含了内容、内边距和边框;外边距在黑框外面,表示这个元素的边界与其他元素之间的距离。

  

  

  

时间: 2024-10-12 18:38:00

样式表的样式的相关文章

css样式表:样式分类,选择器。样式属性,格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p  //格式对p起作用 {样式: } </style> 3.外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→

样式表:样式背景,字体,对齐方式,边界边框。【0909下】

样式表: 样式;     大小:   width 宽度   height 高度 背景:    backyound—color  背景色 backyound—imahe   背景图片 backyound—repeat   背景图片的平铺方式 backyound—position    背景图片的位置 backyound—attachment    设置图片是否滚动 backyound—size    背景图片的大小. 比如:200px,200px 字体: font—familg   字体样式 fo

CSS基础1——CSS样式表及样式规则

1.CSS(Cascading Style Sheets)层叠样式表.用于定义HTMl元素的显示形式,是W3C推出的格式化网页内容的标准技术 2.CSS作为每个网站设计者必须掌握的技术之一,有几个优点: (1)提高页面浏览速度,比传统文本设计方法至少节约50%以上的文件尺寸 (2)缩短改版时间,降低维护费用 (3)结合CSS和DIV,更好的控制页面布局 (4)实现表现和结构.内容相分离 (5)更方便搜索引擎的搜索 3.CSS样式表 (1) 嵌入式样式表 用<style>元素将样式包含在网页内部

css002 创建样式和样式表

创建样式和样式表 一个样式表包含多个样式 样式表的种类 1.内部样式表,存放在<head></head>之间.如: <head> <style>   (该标签是html的标签,不是css的) h1{color: red} </style> </head> 2.外部样式表 Html5 <link rel=”stylesheet” href=”style.css”> Html4.01 <link rel=”stylesh

通过Qt4.2样式表定制程序外观

通过Qt4.2样式表定制程序外观 1. 何为Qt样式表2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. 处理伪状态8. 使用子部件定义微观样式 8.1. 相对定位    8.2. 绝对定位 摘要 由于Qt样式表的引入,定制Qt部件的外观样式变得非常简单. 无论你是想仅仅修改一个现有部件的外观,还是想从零开始设计一套全新的界面风格, 现在都有了一种新的方法而不必再去继承并实现一个QStyle的子类. 1. 何为Qt样式表 Qt 样式表的思想很大程度上是来自于

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p  

样式表与格式布局

样式表 内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style > p   //格式对p标签起作用 { 样式: } </style> 外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→CSS样式表→附加样式表.一般用link连接方式. 把编剧都设为0像素: 第一种,class引出: 第二种,id引出,独一无二的 第三种:class引出 第四种main 的子标签是p标签 1.外层没有positio

表单,框架,样式表的分类及选择器基础

表单元素1.<from>代表表单,其中属性有action提交给你所设定的页面,method数据提交的方式(get显示提交有长度限制,post隐式提交). 2.文本的表示类型:1.文本框<input>其属性有type类型选择其中的text,valune是文本框的值,name是文本框的名称.2.<input>密码框,其中属性tybe选择password.3.隐藏域其tybe选择hidden.4!文本域用双标签<textarea>,他的值是写在开始和结束标签之间的

HTML静态网页(css样式表)美化

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p >内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p   //格式对p标签起作用 { 样式: } </sty