样式表书写位置

 内嵌式写法

<head>

<style type=”text/css”>

样式表写法

</style>

</head>

外链式写法

写在head里，<link rel=”stylesheet” href = “1.css”>

行内样式表/内联式

<h1 style = “font - size : 30px ; color : red;”>14期霸气</h1>

 

各个样式特点：

 内嵌式 ：样式只作用于当前文件，没有真正实现结构表现分离。

 外链式写法： 作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离

 行内样式表： 作用范围仅限于当前标签，范围小，结构表现混在一起（不推荐使用

 

标签分类（显示的方式）

1：块元素

典型代表 div  h1 -h6   p  ul  li

特点： 独占一行/可设宽高/嵌套（包含）下子块元素宽度（没有定义的情况下） 和父块元 素宽度默认一致。

2行内元素

典型代表span   a strong em del ins label

特点：在同一行上显示 / 不能直接设置宽高 / 元素的宽和高就是内容撑开的宽高

3：行内块元素（内联元素）

典型代表input  img

特点： 在用一行上显示 / 可以设置宽高 /

块元素转行内元素

div，p{

　　　　Display : inline ; 

　　　　}

行内元素转块元素

a，span{

　　　　Display ： block 

 　　　　}

块元素和行内元素转 行内块元素

div，a，ui，ul{

 　　　　　　　　Display ： inline - block ；

　　　　　　　　}

 

CSS三大特性：

1层叠性

当多个样式作用于同一个（类）标签时，样式发生了冲突，总是执行后边的代码（后边的代码层叠前边的代码）。和标签调用选择器的顺序没有关系。

2 继承性

继承性发生的前提是包含（嵌套关系）

文字颜色可以继承

文字大小可以继承

文体可以继承

字体粗细可以继承

文字风格可以继承

行高可以继承

总结：文字的所有属性都可以继承

特殊情况：

h系列不能集成文字的大小

标签不能继承文字颜色

优先级：

默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式 <  !important

继承<通配符<伪对象<标签<伪对象<标签< 伪类|类|属性选择< ID <内联<important

优先级特点： 继承的权重为0 ； 权重会叠加

   权重相同时，css 遵信就近原则：靠近元素的样式具有最大的优先级，或者  说排在最后的样式优先级最大

 所有都相同时，声明靠后的优先级最大  

 

CSS 链接伪类

A : link { 属性：值 ；}    a { 属性 ：值 }效果是一样的。

A：link { 属性：值 ；} 链接默认状态

A：visited { 属性：值;  } 链接访问之后的状态

A：hover { 属性：值； } 鼠标放到链接上显示的状态

A：active { 属性：值； } 链接激活的状态

  ：focus{属性： 值； } 获取焦点

 

文本修饰：

text-decoration ：none |underline  | line-though   下划线

背景属性：

Background-color   背景色

Background-image  背景图片

Background-repeat:repeat(默认)\ background-no-repeat \repeat-x \ repeat-y背景平铺

Background-position 背景位置left ,right ,center ,top,bottom

Background-position: right ; 方位值只写一个的时候，另外一个默认居中

Background-position: right bottom ;   此时任意

Background-position: 20px 30px ;  第一个为水平方向，第二个代表在垂直方向

l Background-positionX：在X轴上的位置

l Background-positionY：在Y轴上的位置

Background-attachment  背景是否滚动 scroll \ fixed

背景属性连写:

background：red url（“1.png”） no-repeat 30px 40px  scroll ；

Line-height = 50px; 行高

CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性的更多相关文章

  1. 图解 CSS: 理解样式表的逻辑（转载）

    原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html 样式表可以是外部的.内联的或嵌入的; 链接外部样式文件一般是:<lin ...

  2. css 05-CSS样式表的继承性和层叠性

    05-CSS样式表的继承性和层叠性 #本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 ...

  3. CSS的样式表基本概念

    一.样式表分类 1.内联样式表 <p style="fint-size:24px;">直接在标签内部进行样式设置</style> 2.内嵌样式表 <h ...

  4. htm基础知识，css的链入以及标签分类。

    <!DocTYPE>  DOC--Document 文档  TYPE  类型  文档类型 告诉浏览器这是什么文件 单标签: meta  设置   charset  设置编码 双标签: 开始 ...

  5. css 层叠式样式表（2）

    一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...

  6. CSS篇-样式表、选择器、权重、伪类

    CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...

  7. CSS级联样式表-css选择器

    CSS概念 Cascading Style sheet 级联样式表 表现HTMl或XHTML文件样式的计算机语言 包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定 建议:把表示样式的代码从 ...

  8. 学习HTML 第三节.接近正题：HTML样式-CSS级联样式表

    CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...

  9. css 层叠式样式表（1）

    实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中,通过引用来建立文件 ...

随机推荐

  1. <C++Primer>第四版 阅读笔记 第四部分 “面向对象编程与泛型编程”

    继承和动态绑定与数据抽象一起成为面向对象编程的基础. 模板使我们能够编写独立于具体类型的泛型类和泛型函数. 第15章 面向对象编程 面向对象编程基于三个基本概念:数据抽象.继承和动态绑定.在C++中, ...

  2. Sublime Text3自定义主题

    设置背景色和关键字颜色(Color Scheme 生成器): Color Scheme 生成器地址:http://tmtheme-editor.herokuapp.com/ 首先:点击General- ...

  3. 解决IIE8不支持媒体查询的方法

    最近在解决UI问题时碰到以下浏览器不兼容性问题(本人属于UI业余操作者,很多想法就很业余了): 问题:IE8及其以下低版本IE浏览器在缩小窗口时,UI没有按照相应的要求显示窗口缩小时对应的布局:其他浏 ...

  4. 初识servlet--未完成

    servlet到底是什么呢?今天我们一起看一下. 首先说下servlet是干啥的.servlet主要干这么一个事情:创建动态的问页面. servlet主要的功能是,访问外网,连接外部接口.它可以做如下 ...

  5. 基于C++11的线程池,简洁且可以带任意多的参数

    咳咳.C++11 加入了线程库,从此告别了标准库不支持并发的历史.然而 c++ 对于多线程的支持还是比较低级,稍微高级一点的用法都需要自己去实现,譬如线程池.信号量等.线程池(thread pool) ...

  6. UIApplication 和 Appdelegate-----iOS

    正文 一 UIApplication 1.一个UIApplication代表是一个应用程序,而且是单例的.一个程序也只能有一个UIApplication对象 2.获取UIApplication对象: ...

  7. matlab switch case 和 try catch用法示例

    %清除变量或指令 clc;clear; % 允许用户输入参数 disp ('该功能练习switch语句'); disp ('输入1-10其中一个数,系统判定奇偶. '); count = input ...

  8. 【转】jqGrid学习之介绍

    JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情.   ...

  9. maven lean install 的时候出错 Failed to clean project

    问题解决1 : 这种情况是属于  本地有多个  java  线程,关掉其中不用的,或者 都关闭就可以了. 问题解决 2 : Caused by: org.springframework.beans.f ...

  10. jQuery的基本操作

    jQuery就是一个js的库· 主要分为两部分:            1·寻找元素         (选择器,筛选器)            2·操作元素          (CSS的操作,属性的操 ...