css基础

来源：互联网发布：s7200仿真软件下载编辑：程序博客网时间：2024/06/06 19:50

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

基础

基础语法

<head><style type="text/css">    选择器（即修饰对象）{    对象的属性1: 属性值1;    对象的属性2: 属性值2;  }</style></head>

选择器

元素选择器<style>        /*            CSS的注释：                直接写元素名{                    样式名:样式值;                    样式名:样式值;                }        */        div{            font-size:50px;            color:#660000;        }  </style>id选择器<style>        /*            #id值{                样式名：样式值;                样式名: 样式值;            }        */        #div2{            font-size:50px;            color:#330066;        }  </style>类选择器<style>        /*            类选择器            .类名{                样式名:样式值;                样式名:样式值;            }        */        .one{            font-size:50px;            color:#FF0000;        }  </style>

css控制字体

div{            font-size:50px;            font-family:隶书;            font-style:italic;            font-weight:bold;            color:red;            text-decoration:line-through;        }

css控制背景

div{            width:500px;            height:300px;            border:1px solid blue;            /*设置div背景*/            /*background:#FFFF00;*/            background:url(../images/7e971270.gif) no-repeat center top;        }

css控制列表

li{            list-style-type:none;            list-style-image:url("../images/7e971270.gif");        }

边框，外边距，内边距

        body{            margin:0px;//外边距        }        #div1{            border:5px solid #FF0000;            width:300px;            height:80px;        }        #div2{            border:5px solid #FF0000;            border-bottom:3px dashed #0033CC;             border-top:3px dashed #0033CC;             width:300px;            height:100px;               margin:100px 200px 200px 50px;//外边距            padding-left:50px;//内边距            padding-top:80px;//内边距        }

css控制悬浮

值   描述left    元素向左浮动。right   元素向右浮动。none    默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit 规定应该从父元素继承 float 属性的值。例：float:left;clear区隔属性例：<style type="text/css">img  {  float:left;  clear:both;  }</style>clear作用如果前一个元素存在左浮动或右浮动，则换行以区隔 只对块级元素有效clear属性的取值rightleftboth none

css控制伪类
CSS 伪类用于向某些选择器添加特殊的效果。

<HTML> <HEAD>  <TITLE> New Document </TITLE>  <style>        /*超链接未点击*/        a:link{            color:#000000;        }        /*已经点击完成了*/        a:visited{            color:#FF0000;        }        /*鼠标放在上面 但是还没点击*/        a:hover{            color:#00FF00;            font:28px;        }        /*鼠标点击的时候,但是还没松开.*/        a:active{            color:#0000FF;        }  </style> </HEAD> <BODY>    <a href="#">超链接</a> </BODY></HTML>

三类应用样式的方式

内部样式表：定义在本文件的style中

外部样式表：

<link rel="stylesheet" href=CSS外部文件名 type="text/css"  />

行内样式：定义在标签内

特殊用途

css参考手册中css定位属性display

常用的值：none    此元素不会被显示。block   此元素将显示为块级元素，此元素前后会带有换行符。inline  默认。此元素会被显示为内联元素，元素前后没有换行符。例：display:none;该元素隐藏

CSS3 filter(滤镜) 属性：
CSS3 filter(滤镜) 属性

阅读全文

1 0