样式表书写位置

 内嵌式写法

<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. SysLog简介和java操作实例

    什么是SysLog syslog协议属于一种主从式协议:syslog发送端会传送出一个小的文字讯息(小于1024字节)到syslog接收端.接收端通常名为“syslogd”.“syslog daemo ...

  2. 【.Net Framework 体积大？】不安装.net framework 也能运行！？开篇叙述-1

    [声明:请尊重作者micro-chen的原创,抓文章,请添加来源和作者署名.作者保留追责权利.......] 写在前言 看着日渐没落的.net ,心里多少有了点悲凉.国内的越来越多的新兴公司 都是JA ...

  3. swift 2.0 用代码写一个简单地UIWebView

    其实写一个UIWebView 挺简单的,但是今天就被9.0 的新特性给坑了,不知道上一个项目中有没有遇到这个问题,反正是时间成了,自己也忘记了.今天还是再说一次吧. 我们先简单的创建一个UIWebVi ...

  4. java中字符串与数字的互相转换

    import java.text.DecimalFormat; /* * String类中本身提供方法可以将几乎所有的基本类型转换为String类型 * sysout alt+/ 可以直接显示Syst ...

  5. React 国际化

    前言 React 做国际化,我推荐使用 React-intl , 这个库提供了 React 组件和Api两种方式来格式化日期,数字和字符串等.知道这个库了,那让我们开始使用它 组件用法 为了和Reac ...

  6. LruCache原理解析

    LruCache是一个泛型类,它内部采用LinkedHashMap,并以强引用的方式存储外界的缓存对象,提供get和put方法来完成缓存的获取和添加操作.当缓存满时,LruCache会移除较早的缓存对 ...

  7. EF CodeFirst下数据库更新

    用EF Code first模式来开发系统,可使用Migrations命令来让数据库自动更新 1.在VS->工具->库程序包管理器->程序包管理控制台 中执行 Enable-Migr ...

  8. Protege5.0.0入门学习

    OWL本体的重要组成部分 Individuals:个体,代表一个领域里面的对象.可以理解成一个类的实例(instances of classes). Properties:属性,是两个个体之间的双重联 ...

  9. SQL SERVER的统计信息

    1 什么是统计信息     统计信息 描述了 表格或者索引视图中的某些列的值 的分布情况,属于数据库对象.根据统计信息,查询优化器就能评估查询过程中需要读取的行数及结果集情况,同时也能创建高质量的查询 ...

  10. angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）

    在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...