样式表书写位置

 内嵌式写法

<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. 手动搭建apache james邮件服务器，实现邮件功能

    最近一直在搞邮件这块,本来我们邮件发送是用的腾讯免费的企业邮箱,邮件功能没有问题,但是由于邮件的限制,如下: 这些限制导致我们的部分客户是收不到邮件的,哪怕付费,这样的固定频率限制也是无法解决的,可以 ...

  2. IIS7.0发布后关于"不能在此路径中使用此配置节”的解决办法

    在系统为window sever2008,iis7.0上安装后发布出现 IIS Web Core 通知 BeginRequest 处理程序 尚未确定 错误代码 0x80070021 配置错误 不能在此 ...

  3. Spring MVC 的环境搭建和入门小程序

    1.1.下载spring框架包. 1.1.1百度搜索Spring Framework. 进入spring官网,在网页右边选择想要下载的版本.如图 1.1.2进入页面按Ctrl+F搜索Distribut ...

  4. 5分钟快速入门 - Less

    下面给大家讲解下Less,纯手工,入门级别,相信没学过的人阅读完后就懂了,以下是我要讲的四点: 简单介绍 Less CSS 是一个使用广泛的 CSS 预处理器. 对 CSS 进行扩展,减少很多 CSS ...

  5. Vimium -为键盘而生

    The hacker's browser. 作为一个Chrome的忠实使用者,从开发人员工具到谷歌的扩展程序(extensions)[插件],这些都在无形之中提高我们的工作效率. N年前的一天,看到了 ...

  6. 《剑指offer》— JavaScript（19）顺时针打印矩阵

    顺时针打印矩阵 题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打 ...

  7. zabbix安装详解

    关于zabbix及相关服务软件版本: Linux:centos 6.6 nginx:1.9.15 MySQL:5.5.49 PHP:5.5.35 一.安装nginx: 安装依赖包: yum -y in ...

  8. 分享学习——ERP项目管理经验

    为什么在实施过程中有的项目就能做的非常好,有的项目应用效果就非常差?原因在哪里?下面本人就从下面几个方面进行分析: 1.什么是项目? 2.在ERP软件行业项目应该怎么做? 3.为什么有一些项目会失败, ...

  9. Robot Framework中经常用的第三方库的安装方法

    pip升级:python -m pip install --upgrade pip 一.安装robotframework-selenium2library,相当于python中的selenium    ...

  10. MySQL学习分享-->查询-->查询的分类

    MySQL的查询可以分为交叉联接.内联接.外联接.自然联接.straight_join 下面对于查询的学习,会用到以下四张表: create table t_commodity_type( `id` ...