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. HDU 2255.奔小康赚大钱 最大权匹配

    奔小康赚大钱 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  2. Spring 属性注入(三)AbstractNestablePropertyAccessor

    Spring 属性注入(三)AbstractNestablePropertyAccessor Spring 系列目录(https://www.cnblogs.com/binarylei/p/10117 ...

  3. Netty 源码 ChannelHandler(四)编解码技术

    Netty 源码 ChannelHandler(四)编解码技术 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) 一.拆包与粘 ...

  4. powershell上传证书

    https://www.cnblogs.com/threestone/p/4001632.html powershell上传证书

  5. hbase 无法打开60010网页

    在hbase-site.xml中添加如下节点 <property> <name>hbase.master.info.port</name> <value> ...

  6. Python中sys和os模块的区别

    sys: This module provides access to some variables used or maintained by the interpreter and to func ...

  7. mui-手动触发下拉刷新

    mui-手动触发下拉刷新   下拉刷新结束 mui官方文档中下拉刷新结束方法,不生效, 文档地址 1 mui('#refreshContainer').pullRefresh().endPulldow ...

  8. springMVC 学习 五 参数传递(包括restful风格)

    (一)SpringMVC Controller接受参数的方式 (1) 前端传递的参数,在springMVC的controller中使用基本数据类型或者String 类型进行接受 在前端有一个form表 ...

  9. pt-query-digest详解慢查询日志

    一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...

  10. 2018.12.23 bzoj2865&&1396: 字符串识别(后缀自动机+线段树)

    传送门 卡空间差评! 题意简述:给一个字串,对于每个位置求出经过这个位置且只在字串中出现一次的子串的长度的最小值. 解法:先建出samsamsam,显然只有当sizep=1size_p=1sizep​ ...