样式表书写位置

 内嵌式写法

<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. Ubuntu16.04+Theano环境

    安装Anaconda: 官网下载Anaconda 切换到下载目录 cd ~/下载/ 用bash运行下载好的.sh文件 bash Anaconda2--Linux-x86_64.sh 进入欢迎界面 We ...

  2. 【4N魔方阵】

    /* 4N魔方阵 */ #include<stdio.h> #include<stdlib.h> #define N 8 int main(void){ int i, j; ] ...

  3. gevent拾遗

      在前文已经介绍过了gevent的调度流程,本文介绍gevent一些重要的模块,包括Timeout,Event\AsynResult, Semphore, socket patch,这些模块都涉及当 ...

  4. swift2.0 字符串，数组，字典学习代码

    swift 2.0 改变了一些地方,让swift变得更加完善,这里是一些最基本的初学者的代码,里面涉及到swift学习的最基本的字符串,数组,字典和相关的操作.好了直接看代码吧. class View ...

  5. c++编程思想（二）--对象的创建和使用

    1.解释器:将源码转换为动作(机器语言),并立即执行 编译器:编译器也会将源码转换为机器语言,但是中间会经过好多步骤,分段编译 ,然后链接,可以实现将代码模块化 2.c++不鼓励多使用预处理命令 3. ...

  6. win8下 msvcr100d.dll文件缺失解决方法

    一.如果在运行某软件或编译程序时提示缺少.找不到msvcp100d.dll等类似提示,您可将从载来的msvcp100d.dll拷贝到指定目录即可(一般是system系统目录或放到软件同级目录里面),或 ...

  7. C语言程序_管理系统

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define N 3 #define LEN ...

  8. 2011 Multi-University Training Contest 1 - Host by HNU

    A.A + B problem(待填坑) B.Cat VS Dog(二分图匹配) 喜欢cat和喜欢dog的人构成了二分图,如果两个人有冲突则连一条边,则问题转化为二分图最大点独立集问题.ans=n-最 ...

  9. gridcontrol显示行号,总行,打印,导出Excel,设置标头及内容居中方法

    1.一般为了表格显示数据更直观,经常会显示行号以及总数.让gridcontrol显示行号,首先你需要设置一下显示行号的宽度,也就是IndicatorWith.默认值为-1,可根据实际数值需要设置宽度, ...

  10. 理解WEB API网关

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...