css1

来源：互联网发布：js json数据格式编辑：程序博客网时间：2024/05/16 07:29

CSS的基本概念
CSS基础
CSS是Cascading Style Sheet的缩写，翻译为“层叠样式表”，简称“样式表”。
样式表的首要目的是为网页上的元素精确定位。其次，把网页上的内容结构和格式控制相分离。即html的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。
优点：简化网页的格式代码，加快网页下载显示的速度，也减少了需要上传的代码数量，大大减轻了重复劳动的工作量。
CSS运用
CSS 的优点
改变浏览器的默认显示风格
页面内容和显示样式分离
可以重用样式表
方便网站维护
常用的样式属性
如何使用CSS
使用CSS
CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。
一系列的样式组成了“样式表”。
CSS的语法结构：
选择符{样式属性:取值;样式属性:取值;样式属性:取值;…}
   CSS的基本语法
样式和样式表
   1．样式
    样式是由成对的属性名和属性值以冒号“：”相间组成。
        2．样式表
     一系列的“样式”以分号“；”相间组成为“样式表”。

行内样式：HTML标签直接使用style属性，称为行内样式（Inline Style）。它适用于只需要简单地将一些样式应用于某个独立的元素的情况。
例如：<table style="color:red;margin-left:200px">
           …
           </table>
例如： <input style="border:3px solid blue" name="uname" type="text">
行内样式
CSS的运用
内嵌样式-1
内嵌样式表
内嵌样式表：是在<head>标签内添加<style></style>标签对，在标签对内定义需要的样式。
例如，<head>
   <style type=“text/css”>
    td{font-size:9pt;color:red}
    .font105{font-size:10.5pt;color:blue}
   </style>
  </head>
内嵌样式-2 选择器
选择器分为：
HTML 选择器
CLASS 类选择器
ID 选择器
样式选择器
样式选择器
HTML标签选择器：在HTML页面中使用的标签，如果在CSS中被定义，那么此网页的所有该标签都将按照CSS中定义的样式显示。
类选择器：使用HTML标签的class属性引入CSS中定义的样式规则的名字，称为类选择器，class属性指定的样式名字必须是以“.”开头。

选择器介绍
ID选择器：ID属性是用来定义某一特定的HTML元素，与class属性刚好相反，class属性是用来定义一组功能或格式相同的HTML元素。ID选择器定义的CSS名称必须以“#”开头，
通用选择器：是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。
伪类选择器：是指对同一HTML元素的各种状态和其所包括的部分内容的一种定义方式。

外部样式
根据样式文件与网页的关联方式又分为：
链接（LINK ）外部样式表
导入（import）外部样式表

外联样式表:是将<style>标签内的样式语句定义在扩展名为.css的文件中。通过使用<link>标签引入样式文件。
例如，<head> <link href="mystyle.css" rel="stylesheet" type=“text/css”>     </head>
优点：一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。
链接外部样式表
使用LINK（链接）标签，语法：
<HEAD>
<LINK   rel = “stylesheet”    type = ”text/css”    href = ”样式表文件.css” >
</HEAD>
导入样式表
导入样式表：是使用CSS的@import命令将一个外部样式文件输入到另外一个样式文件中，被输入的样式文件中的样式规则定义语句就成了输入到的样式文件中的一部分。
例如， <head>   <style type=”text/css”>      </style> </head>
导入外部样式表
使用@import导入，语法：
<HEAD>
<STYLE TYPE="text/css">
@ import 样式表文件.css;
</STYLE>
</HEAD>
样式的混合使用
行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常
需要混合使用：
有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式
某张网页内，部分内容”与众不同“，采用行内样式
   CSS中的注释
样式规则的注释样式规则是使用/*需要注释的内容*/进行注释的。即在需要注释的内容前使用“/*”标记开始注释，在内容的结尾使用“*/”结束。注释可以多行内容注释。其注释范围在“/*”与“*/”之间。
   常用的样式属性
1．文字
2．背景
3．边框线
4．高度和宽度
5．间距和边距
6．列表
7．位置和布局

1．颜色

       CSS中的颜色是由红、蓝、绿3种颜色组合而成的，每一种颜色用数字0至255表示
   长度定义
CSS的长度单位可以是下述几种：
    in（英寸）
    cm（厘米）
    mm（毫米）
    em（字高）
    pt（点= 1/72英寸）
    pc（pica点=12点）
    px（像素点）。

定义样式表
指定“对象”来定义样式表的语法规则如下：
对象1, 对象2 …… { 样式表 }

下级对象
用于某一种元素中的下级元素，定义时两元素名之间用空格相间。
P em{color:blue;}

所以元素对象
*｛color：blue;｝

CSS文字与文本
设置字体——font-family
设置字号——font-size
设置字体样式——font-style
设置字体加粗——font-weight
设置字体变体——font-variant
组合设置字体属性——font