5.css背景以及书写位置
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背景以及书写位置的更多相关文章
- CSS样式表书写位置
一.内嵌式写法:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type=”text/css”> 样式表写法 </style> < ...
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...
- (转)background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- css背景图片位置:background的position(转)
css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...
- css的书写位置+元素分类
1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...
- css样式的书写顺序及原理
刚开始学习前端的时候,每次写css样式都是用到什么就在样式表后添加什么,完全没有考虑到样式属性的书写顺序对网页加载代码的影响.后来逐渐才知道正确的样式顺序不仅易于查看,并且也属于css样式优化的一种方 ...
- css背景精华所在+前端页面开发流程
background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
- CSS——背景及应用
CSS 可以添加背景颜色和背景图片,以及进行图片设置. none : 无背景图(默认的) url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中 ...
- 0016 CSS 背景:background
目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...
随机推荐
- CF Round #509 (Div. 2)
前言:第一次打\(CF\),因为经验不足以及英语水平很烂,即便在机房大佬的带领下也是花了好久才读懂题目..\(A\)题直到\(11\)分钟才\(A\),题目一共才做了\(4\)题,太菜了.. A. H ...
- C#在Winform程序中显示QQ在线状态
首先,引入必要的命名空间 using System.Windows.Forms; using System.Net; 其次,在Form中拖入一个PictureBox控件,并设置其SizeMode为A ...
- MySQL学习笔记-锁相关话题
在事务相关话题中,已经提到事务隔离性依靠锁机制实现的.在本篇中围绕着InnoDB与MyISAM锁机制的不同展开,进而描述锁的实现方式,多种锁的概念,以及死锁产生的原因. Mysql常用存储引擎的锁 ...
- python 计时程序运行时间
import time time_start=time.time() time_end=time.time() print('totally cost',time_end-time_start)
- filedisk.sys
i386 amd http://blog.sina.com.cn/s/blog_4fcd1ea30100r19r.html
- AUC和ROC
https://www.cnblogs.com/gatherstars/p/6084696.html
- 让UI设计师崩溃的瞬间,你经历过哪些?
隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通.流畅的沟通,和声细语,是有如时雨之化者:无效 ...
- idea15 生成mybatis代码
pom.xml <build> <finalName>mybatis_generator</finalName> <plugins> <plugi ...
- 提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析
webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果&l ...
- Java中TreeMap的基本操作
TreeSet有四种种构造函数可以初始化 在代码中主要列出了常用的三种: 构造方法摘要 TreeSet() 构造一个新的空 set,该 set 根据其元素的自然顺序进行排序. Tr ...