1.样式表书写位置

  1. ◆内嵌式写法
<head>

<style type=”text/css”>

样式表写法

</style>

</head>

  2.◆外链式写法(开发中经常使用)

写在head里,<link rel=”stylesheet” href=”.css”>

  

  3.◆行内样式表

◆三种写法特点:

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

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

★行内样式表,作用范围仅限于当前标签,范围小,结构表现混在一起。  (不推荐使用)

2.标签分类(显示方式)

1. 块元素

典型代表,div,h1-h6,p,ul,li

特点: ★独占一行

★可以设置宽高

★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致。

2.行内元素

典型代表 span  ,a,  ,strong , em,  del,  ins

特点:★在一行上显示

★不能直接设置宽高

★元素的宽和高就是内容撑开的宽高。

3. 行内块元素(内联元素)

典型代表  input  img

特点:★在一行上显示

★可以设置宽高

1.1 块元素、行内元素

◆块元素转行内元素

display:inline;

◆行内元素转块元素

display:block;

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

display:inline-block;

css三大特性

1.1 层叠性

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

1.2  继承性

继承性发生的前提是包含(嵌套关系)

★文字颜色可以继承

★文字大小可以继承

★字体可以继续

★字体粗细可以继承

★文字风格可以继承

★行高可以继承

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

◆特殊情况:

h系列不能继承文字大小。

a标签不能继承文字颜色。

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

0         1          10     100      1000      1000以上

◆优先级特点

★继承的权重为0

★权重会叠加

链接伪类

a:link{属性:值;}  a{属性:值}效果是一样的。

a:link{属性:值;}       链接默认状态  

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

a:hover{属性:值;}      鼠标放到链接上显示的状态  

a:active{属性:值;}      链接激活的状态(鼠标一直点击不放)

a:focus{属性:值;}     获取焦点

文本修饰

text-decoration: none  |   underline   |     line-through

1 背景属性

1.1 background-color     背景颜色
1.2 background-image 背景图片
1.3 Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
1.4 Background-position left | right | center | top | bottom 背景定位

★方位值只写一个的时候,另外一个值默认居中。

★写2个方位值的时候,顺序没有要求。

★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。

1.1 background-attachment   背景是否滚动   scroll  |  fixed

1.2 背景属性连写

★:连写的时候没有顺序要求,url为必写项。

5.css背景以及书写位置的更多相关文章

  1. CSS样式表书写位置

    一.内嵌式写法:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type=”text/css”> 样式表写法 </style> < ...

  2. 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

    亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...

  3. (转)background-position—CSS设置背景图片的位置

    background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...

  4. css背景图片位置:background的position(转)

    css背景图片位置:background的position   position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...

  5. css的书写位置+元素分类

    1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...

  6. css样式的书写顺序及原理

    刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方 ...

  7. css背景精华所在+前端页面开发流程

    background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  8. CSS——背景及应用

    CSS 可以添加背景颜色和背景图片,以及进行图片设置. none : 无背景图(默认的) url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中 ...

  9. 0016 CSS 背景:background

    目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...

随机推荐

  1. CF Round #509 (Div. 2)

    前言:第一次打\(CF\),因为经验不足以及英语水平很烂,即便在机房大佬的带领下也是花了好久才读懂题目..\(A\)题直到\(11\)分钟才\(A\),题目一共才做了\(4\)题,太菜了.. A. H ...

  2. C#在Winform程序中显示QQ在线状态

    首先,引入必要的命名空间 using System.Windows.Forms;  using System.Net; 其次,在Form中拖入一个PictureBox控件,并设置其SizeMode为A ...

  3. MySQL学习笔记-锁相关话题

    在事务相关话题中,已经提到事务隔离性依靠锁机制实现的.在本篇中围绕着InnoDB与MyISAM锁机制的不同展开,进而描述锁的实现方式,多种锁的概念,以及死锁产生的原因.   Mysql常用存储引擎的锁 ...

  4. python 计时程序运行时间

    import time time_start=time.time() time_end=time.time() print('totally cost',time_end-time_start)

  5. filedisk.sys

    i386 amd http://blog.sina.com.cn/s/blog_4fcd1ea30100r19r.html

  6. AUC和ROC

    https://www.cnblogs.com/gatherstars/p/6084696.html

  7. 让UI设计师崩溃的瞬间,你经历过哪些?

    隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通.流畅的沟通,和声细语,是有如时雨之化者:无效 ...

  8. idea15 生成mybatis代码

    pom.xml <build> <finalName>mybatis_generator</finalName> <plugins> <plugi ...

  9. 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析

    webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...

  10. Java中TreeMap的基本操作

    TreeSet有四种种构造函数可以初始化 在代码中主要列出了常用的三种: 构造方法摘要 TreeSet()           构造一个新的空 set,该 set 根据其元素的自然顺序进行排序. Tr ...