样式表书写位置

 内嵌式写法

<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. java_XML_SAX

    用SAX解析XML采用的是从上而下的基于事件驱动的解析方式,在解析过程中会视情况自动调用startDocument().startElement().characters().endElement() ...

  2. git 打卡的第一天

    因为某种原因,所以不得不重新巩固下前端的基础知识,从最基本的学习还得额外的学习新知识,倍感压力之大. 昨天初略学习下git,算是自己学习的一个新知识.简单记录下,希望四海八荒的大神看过来,有错的请指导 ...

  3. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

  4. 关于post与get请求参数存在特殊字符问题

    遇到项目中存在文本编辑框输入特殊字符 比如:# ? & 空格 , 导致后台接受不到参数问题,对可能存在特殊字符的参数进行encodeURIComponent; C#后台接受参数不需要解码 也可 ...

  5. [转]CentOS 6.3下Samba服务器的安装与配置

    一.简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,而SMB是Server Message Block的缩写,即为服务器消息块 ,SMB主要是作为Microsoft的 ...

  6. [Noi2014]魔法森林( 动态mst lct)

    以前一直觉得lct特别难写，自从学了丽洁姐的lct之后，觉得lct居然能这么短，这个主程序能40行左右解决~~~~ 这道嘛~~虽说能用spfa解决，但还是写下lct吧 把边按a值排序后一条一条插入并维 ...

  7. MVC和三层架构

    从最开始写程序到现在,一路上听到架构这个词已经无数次了,在工作和圈子里也不停听到大家在讨论它,但是很多时候发现不少人对这个概念的理解都是很模糊的,无意间在知道上看到一个朋友的回答,感觉很不错,特转帖到 ...

  8. 关于开发中使用writeToFile时的注意事项

    总会有一些坑在前面等着你 我们先来看一下后台返回的部分json数据,稍后再来分析问题,仔细看一下userId和userCode两个字段,其他不用看 "list": [{ " ...

  9. WebSite---前台系统图片验证码心得

    背景: 因为移动端APP和Msite手机注册发送短信验证码没有添加图片验证码功能.公司的短信接口被恶意刷取.所以我们就觉得在移动端添加一个图片验证码功能.分享一下大体实现方式思路.PS demo是自己 ...

  10. TCP和UDP 的区别和适用场合

    TCP和UDP式TCP/IP中能够实现传输层功能的.具有代表性的协议,其主要特点和区别如下: TCP: 面向连接的.可靠的流协议.为提供可靠性传输,TCP实行"顺序控制"或&quo ...