3:CSS属性组成和作用

学习目标

    • 1、css属性和属性值的定义
    • 2、css文本属性
    • 3、css列表属性
    • 4、css背景属性
    • 5、css边框属性
    • 6、css浮动属性

一、css属性和属性值的定义

属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性

属性值:属性值包括法定属性值及常见的数值加单位,如25px,或颜色值等。

二、CSS文本属性

      • 1、文本大小:{font-size:value;}

        说明:

        1) 属性值为数值型时,必须给属性值加单位,属性值为0时除外。

        2)单位还可以是pt,9pt=12px;

        3)为了减小系统间的字体显示差异,IE Netscape Mozilla的浏览器制作商于1999年召开会议,共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下,1em=16px,0.75em=12px; rem

        4)使用绝对大小关键字

        xx-small =9px
         x-small =11px
         small =13px
         medium =16px
         large =19px
         x-large =23px
         xx-large =27px

      • 2、文本颜色:{color:颜色值;}

        说明:

        用十六进制(是计算机中数据的一种表示方法)表示颜色值:
        0 1 2 3 4 5 6 7 8 9
        0 1 2 3 4 5 6 7 8 9 A B C D E F
        颜色模式:光色模式
        R G B
        FF 00 00
        颜色值的缩写:
        当表示三原色的三组数字同时相同时,可以缩写为三位;
        当用十六进制表示颜色值时,需要在颜色值前加“#”
        # fa 00 00

      • 3、文本字体:{font-family:字体1,字体2,字体3;}

        说明:

        浏览器首先会寻找字体1、如存在就使用改字体来显示内容,如在字体1不存在的情况下,则会寻找字体2,如字体2也不存在,按字体3显示内容,如果字体3 也不存在;则按系统默认字体显示;
        当字体是中文字体时,需加双引号;
        当英文字体中有空格时,需加双引号如(“Times New Roman”)
        当英文字体只有一个单词组成是不加双引号;如:(Arial);
        Windows中文版本操作系统下,中文默认字体为宋体或者新宋体,英文字体默认为Arial.

      • 4、文字加粗font-weight:bolder(更粗的)/bold(加粗)/normal(常规)/100—900;

        说明:

        在css规范中,把字体的粗细分为9个等级,分别为100——900,其中100对应最轻的字体变形,而900对应最重的字体变形,
        100-400 一般 500常规字体 600-900加粗字体

      • 5、font-style:italic/oblique/normal(取消倾斜,常规显示);

        说明:

        italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字,而Oblique是倾斜的文字,对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.

      • 6、水平对齐方式{text-align:left/right/center/justify(两端对齐中文不起作用);}
      • 7、文字行高 {line-height:normal/value;}

        说明:

        当单行文本的行高等于容器高时,可实现单行文本在容器中垂直方向居中对齐;
        当单行文本的行高小于容器高时,可实现单行文本在容器中垂直中齐以上;
        当单行文本的行高大于容器高时,可实现单行文本在容器中垂直中齐以下(IE6及以下版本存在浏览器兼容问题)

      • *文字属性简写:font:12px/24px "宋体";
        font属性的简写:字号,行高,字体
        font-size:12px; line-height:24px; font-family:”宋体”;
        font属性的简写:
        说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
        顺序: font-style font-weight font-size / line-height font-family

        注意:

        (1)简写时 , font-size和line-height只能通过斜杠/组成一个值,不能分开写。
        (2) 顺序不能改变 ,
        这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值(默认值)。

      • 6、水平对齐方式{text-align:left/right/center/justify(两端对齐中文不起作用);}
      • 7、文本修饰 text-decoration:none/underline/overline/line-through

        说明:

        none:没有修饰
        underline:添加下划线
        overline:添加上划线
        line-through:添加删除线

      • 8、首行缩进:{text-indent:value;}

        说明:

        1)text-indent可以取负值;

        2)text-indent属性只对第一行起作用。

      • 9、字间距{letter-spacing:value;}控制英文字母或汉字的字距。
      • 10、词间距{word-spacing:value;}控制英文单词词距。
      • 11、文本流控制{layout-flow:horizontal/vertical-ideographic;}

        说明:

        1)horizontal:自左向右

        2)vertical-ideographic:自上而下

三、CSS列表属性

      • 1、定义列表符号样式

        list-style-type:disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);list-style-type:none===list-style:none;

      • 2、使用图片作为列表符号

        list-style-image:url(所使用图片的路径及全称);

      • 3、定义列表符号的位置

        list-style-position:outside(外边)/inside(里边);

        list-style:none;去掉列表符号

        四、边框的属性和属性值

        border:边框宽度 边框风格 边框颜色;

        例如:border:5px solid #ff0000

        边框:border,网页中很多修饰性线条都是由边框来实现的。

        边框宽度:border-width:

        边框颜色:border-color:

        边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框,

        可单独设置一方向边框,

        border-bottom:边框宽度 边框风格 边框颜色;底边框

        border-left:边框宽度 边框风格 边框颜色;左边框

        border-right:边框宽度 边框风格 边框颜色;右边框

        border-top:边框宽度 边框风格 边框颜色;上边框

五、CSS背景属性

      • 1、背景颜色 {background-color:颜色值;}
      • 2、背景图片的设置 background-image:url(背景图片的路径及全称);
        背景图片的显示原则

        1)容器尺寸等于图片尺寸,背景图片正好显示在容器中
        2)容器尺寸大于图片尺寸,背景图片将默认平铺,直至铺满元素;
        3)容器尺寸小于图片尺寸,只显示元素范围以内的背景图。
        网页上有两种图片形式:插入图片、背景图;
        插入图片:属于网页内容,也就是结构。
        背景图:属于网页的表现,背景图上可以显示文字、插入图片、表格等。

      • 3、背景图片平铺属性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }
      • 4、背景图的固定
        性{{background-attachment:scroll(滚动)/fixed(固定);}

        fixed 固定,不随内容一块滚动;
        scroll:随内容一块滚动。

      • 5、背景图的位置
        性{background-position:left/center/right/数值 top/center/bottom/数值;}

        水平方向上的对齐方式(left/center/right)或值
        垂直方向上的对齐方式(top/center/bottom)或值
        background-position:值1 值2;
        两个值 :第一个值表示水平位置的值,第二个值:表示垂直的位置。
        当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置
        说明:向左方向,向上方向是负值
        背景属性的缩写语法:
        background:属性值1 属性值2 属性值3;
        背景缩写:background:url(背景图片的路径及全称) no-repeat center top #f00;
        网页上常用的图片格式(压缩图片)
        1)jpg :有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;(像素点组成的,像素点越多会越清晰 )如果网页中
        2)gif:有损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,适用于颜色数量较少的图像;
        3)png:有损压缩格式,损失图片的色彩数量来减小图片的体积,支持透明,不支持动画,是fireworks的 源文件格式,适用于颜色数量较少的图像;

六、CSS浮动属性

语法:float:none/left/right;

float:定义网页中其它文本如何环绕该元素显示
浮动的目的:就是让竖着的东西横着来
有三个取值:
left:元素活动浮动在文本左面
right:元素浮动在右面
none:默认值,不浮动。
清除浮动clear:left/right/both

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流

div1
div2
div3
div4

无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。

显然标准流已经无法满足需求,这就要用到浮动。

      浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

页面浮动多个DIV的规律:

假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也

就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前,远离页面边缘的一端是后。

经过上边的学习,可以看出:元素浮动之前,也就是在标准流中,是竖向排列的,而浮动之后可以理解为横向排列

清除浮动可以理解为打破横向排列

清除浮动的关键字是clear,语法:

clear : none | left | right | both

none:默认值。允许两边都可以有浮动对象

left:不允许左边有浮动对象

right : 不允许右边有浮动对象

both : 不允许有浮动对象

有一点是要记住的那就是

对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素

3、CSS属性组成和作用的更多相关文章

  1. css属性详解和浮动

    一.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符和声明 注:声明又包括属性和属性值 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150 ...

  2. 如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)

    如何使text-overflow:elipsis起作用? 想要使用css属性text-overflow:elipsis起到作用,样式必须跟overflow:hidden; white-space:no ...

  3. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  4. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  5. javascript操作html元素CSS属性

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...

  6. Web 前端开发者必知CSS 属性

    1.  圆角效果 如今的Web设计在不断跟进最新的开发技术,纷纷采用HTML5来开发多样性的Web应用.HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现. “border-ra ...

  7. 用js控制css属性

    在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...

  8. css reset的重置作用(可取还是不可取,取决于你)

    一.重置的理由 当今流行的浏览器中,有些都是以自己的方式去理解css规范,这就会到只有的浏览器对css的解释与设计师的css定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示.,但 ...

  9. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

随机推荐

  1. wifipineapple外接SD卡

    通过SSH或者web访问URL, http://172.16.42.1:1471 输入帐号:root  密码:pineapplesareyummy(默认账号密码) ssh连接:ssh root@172 ...

  2. SkinTK编译使用

    简介 MFC这个东西已经落伍了,不建议使用.我就是吃饱了撑着,还在折腾这个. 平时写点带界面的小程序一般都用Qt来做,简单好用,也很容易做的比较漂亮.我觉得唯一一个算不得多大缺点的缺点就是Qt体积太大 ...

  3. ASIHttpRequest请求HTTPS

    一种方法 ASIHTTPRequest *request = [ASIHTTPRequestrequestWithURL:[NSURLURLWithString:bodyString]]; [requ ...

  4. Python 隔离沙箱 virtualenv

    我认为Python一个很大的优势就是官方网站给出的众多的软件包,几乎能帮助你实现你想要的任何功能,避免了重复开发的劳动,但是零零碎碎的包,以及每个包的各种各样的版本管理就成为了一个比较棘手的问题,因此 ...

  5. [转]Java 反射在实际开发中的应用

    一:Java类加载和初始化 1.1 类加载器(类加载的工具) 1.2 Java使用一个类所需的准备工作 二:Java中RTTI 2.1 :为什么要用到运行时类型信息(就是RTTI) 2.2  :RTT ...

  6. FFmpeg: AVFormatContext 结构体分析

    AVFormatContext 结构体分析这个结构体描述了一个媒体文件或媒体流的构成和基本信息.这是FFMpeg中最为基本的一个结构,是其他所有结构的根,是一个多媒体文件或流的根本抽象.主要成员释义: ...

  7. 【驱动】Linux初级驱动系列框架

    [系统环境搭建] 1.uboot的命令 set serverip .xx set ipaddr .xxx set bootcmd tftp zImage\;bootm //开发模式 set bootc ...

  8. Python3自定义json逐层解析器

    [本文出自天外归云的博客园] 用python3对json内容逐层进行解析,拿中国天气网的接口返回数据测试,代码如下: # -*- coding: utf-8 -*- import operator a ...

  9. 【iCore4 双核心板_ARM】例程十二:通用定时器实验——定时点亮LED

    实验原理: 通过STM32的三个GPIO口来驱动LED灯的三个通道,设定GPIO为推挽输出模式,采 用灌电流的方式与LED连接,输出高电平LED灭,输出低电平LED亮,通过通用定时器TIM3 实现50 ...

  10. mac中安装wxpython

    一.简介 wxPython是Python语言的一套优秀的GUI图形库,允许Python程序员很方便的创建完整的.功能键全的GUI用户界面. wxPython是作为优秀的跨平台GUI库wxWidgets ...