博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css样式表
阅读量:5126 次
发布时间:2019-06-13

本文共 1665 字,大约阅读时间需要 5 分钟。

CSS发展史

•1996年12月  css第一版诞生。
•1998年5月  css2正式发布
•2004年    css2.1发布
•Css3的发布……。不是一个时间而是一个时间段
 
 
 
 
CSS的基本概念
–CSS是层叠样式表(Cascading Style Sheet)
 
CSS的作用
用于控制网页的外观,修饰和美化html标签的,实现了结构和形式的分离。

  使用CSS+DIV的优点

  采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优

1:表现和内容相分离
2:提高页面浏览速度
3:易于维护和改版
 
–样式的定义方式

选择器{样式1:样式值1;样式2:样式值2;……}

 

样式表的分类

1、行内样式表

  在html标记内,使用style属性定义css样式。

  如:<p     style=”color:#00ffdc;”></p>

 

、内嵌样式就是将css添加到<head>与</head>之间,并用<style></style>标记声明的一种样式。

  语法如下:

<style>

  /*这里写css内容*/

</style>

3、在外部定义css样式表,通过<link/>链接标记链接到页面中的一种样式。

语法:

<link href="style.css"  rel="stylesheet" type="text/css" />

4、在外部定义css样式表,通过导入方式链接到页面中的一种样式。

语法:

<style>

       @import url();

 </style>

样式表优先级

 

•就近原则
 
CSS选择器
•样式的定义方式

选择器{样式1:样式值1;样式2:样式值2;……}

 

–Css选择器
•全局选择器

  设置所有标签使用同一样式,用*来表示

   全局选择器语法:*{  }

•标签选择器

标签选择器的语法:p{}

 

类选择器

    类选择器:用来为一系列标签定义相同的样式

  类选择器的语法: .classname{}   

  先定义

    .blue{color:#00000ff;}

  然后再引用

  <h2  class=“blue” >一站式建店</h2>

 

ID选择器

ID选择器的语法:#idname{} 

先定义

#green{color:#0000ff;}

 

再引用样式

<h2  id=“green” >一站式建店</h2>

用法和class类似,但要注意同一id名在同一个页面中只能出现一次

 

选择器的优先级及权重

 

• 行内>id>class>element>*

 

•权重:

 

–行内/1000

 

–id/100,

 

–class/10,

 

     element/1,

 

  */0

•基础样式属性
•Color:颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));
•Width:宽度;设置元素的宽度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
•Height:高度;设置元素的高度值,值为数字;单位为px(像素)、em(字符)、%(百分比);默认值为auto(自动,通过浏览器自动计算出宽度值单位为像素)
•Background-color:背景颜色;规定颜色值为颜色单词名称例如(red)或者十六进制值得颜色例如(#ff0000)或者为rgb值得颜色例如(rgb(255,0,0));
•Inherit:属性值,大部分属性都有该属性值意义为继承。

 

颜色值的表示法

•单词表示法
–Red green blue yellow pink orange…
•十六进制表示法
–#ff0000 #00ff00 #0000ff #000000  #ffffff
–#f00 #0f0  #00f  #000 #fff
•Rgb表示法
–(255,0,0)
•Rgba表示法
–(255,255,0,0.3)
 
 

 

 

 

转载于:https://www.cnblogs.com/ayal/p/5837770.html

你可能感兴趣的文章
Java Servlet 过滤器与 springmvc 拦截器的区别?
查看>>
(tmp >> 8) & 0xff;
查看>>
linux命令之ifconfig详细解释
查看>>
NAT地址转换
查看>>
Nhibernate 过长的字符串报错 dehydration property
查看>>
Deque - leetcode 【双端队列】
查看>>
Linux 普通用户拿到root权限及使用szrz命令上传下载文件
查看>>
人物角色群体攻击判定(一)
查看>>
JavaWeb学习过程 之c3p0的使用
查看>>
MySql Delimiter
查看>>
一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service(2)--在事件注册表单上创建表单加载规则...
查看>>
使用客户端对象模型读取SharePoint列表数据
查看>>
POJ 1328 Radar Installation 贪心
查看>>
gulp插件gulp-ruby-sass和livereload插件
查看>>
单元测试原来是这样的呼
查看>>
字符串
查看>>
给lnmp一键包中的nginx安装openresty的lua扩展
查看>>
cogs 547:[HAOI2011] 防线修建
查看>>
WebForm
查看>>
nginx 编译安装
查看>>