CSSS书写位置

  • 内嵌式
<head>

 <style type = "text/css">

    ****

 </style>

</head>
  • 外链式<写在head里>
<link rel="stylesheet" href="1.css">
  • 行内样式表
<h1 style="fontsize:30px;color=red">威武霸气</h1>

三种写法特点

  • 内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
  • 外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
  • 行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）

标签分类（显示样式)

块元素

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

特点：

  • 独占一行
  • 可以设置宽高
  • 嵌套下，子块元素宽度（没有定义情况下)和父亲块元素宽度默认一致

行内元素

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

特点：

  • 在一行上显示
  • 不能直接设置宽高
  • 元素的宽和高就是内容撑开的宽高

行内块元素（内联元素)

典型代表：input,img

特点：

  • 在一行上显示
  • 可以设置宽高

元素之间的转换

  • 块元素转行内元素
div,p{

    display:inline;

}
  • 行内元素转块元素
span{

    display:block

}
  • 块和行内元素转行内块元素
div,a,span,strong{

    display:inline-block

}

CSS三大特性

层叠性

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

继承性

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

  • 文字颜色可以继承

  • 文字大小可以继承

  • 字体可以继承

  • 字体粗细可以继承

  • 文字风格可以继承

  • 行高可以继承

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

  • 特殊情况

    h系列不能继承文字大小

    a标签不能继承文字颜色

优先级

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

优先级特点：

  • 继承的权重为0
  • 权重会叠加

链接伪类

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

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

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

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

a:active{属性:值;}      链接激活的状态

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

背景属性

  • background-color 背景颜色
  • background-image 背景图片
  • Background-repeat repeat(默认) | no-repeat | repeat-x | repeat-y 背景平铺
  • Background-position left | right | center | top | bottom 背景定位
  • Background-attachment 背景是否滚动 scroll | fixed

CSS之元素的更多相关文章

  1. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  2. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  3. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  4. css 伪元素分享！！！

    最近接触到的css 伪元素觉得还算不错 分享下: 1.清楚内盒浮动设置: ;} .back_list ul:after{;visibility: hidden;}/*清楚内盒浮动设置*/ 2.伪元素a ...

  5. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

  6. CSS隐藏元素的几种方法

    使用CSS隐藏元素的方法很多,在这里简单总结一下: 1.display:none display:none 应该是最常用的一种隐藏元素的方法,使用该方法隐藏的元素脱离文档流不占据空间,不会被浏览器解析 ...

  7. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  8. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  9. (六)CSS伪元素

    CSS伪元素用于向某些选择器设置特殊效果. 伪元素的用法和伪类相似: selector:pseudo-element {property:value;} CSS类也可以与伪元素配合使用: select ...

  10. CSS 伪元素

    CSS伪元素是用来添加一些选择器的特殊效果. 语法 伪元素的语法: selector:pseudo-element {property:value;} CSS类也可以使用伪元素: selector.c ...

随机推荐

  1. easyui grid 增加合计行

    一.首先,easyui  grid 的 showfooter 属性设置为 true $aplgrid.datagrid({ data: globalExpenseClaimForm.ExpenseCl ...

  2. 微信小程序开发3-小程序的代码组成

    1.​小程序由配置代码JSON文件.模板代码 WXML 文件.样式代码 WXSS文件以及逻辑代码 JavaScript文件组成 2.JSON: (JavaScript Object Notation) ...

  3. Android进入页面开始就自动弹出软键盘

    EditText edittext = (EditText)findViewById(R.id.edittext);   edittext.setFocusable(true);   edittext ...

  4. SQL点点滴滴_常用函数

    该文章转载自http://www.cnblogs.com/jiajiayuan/archive/2011/06/16/2082488.html 别人的总结,很详细. 以下所有例子均Studnet表为例 ...

  5. linux下设置eclipse中的项目和类名的字体大小

    由于刚装的eclipse中的项目和类名字体太小,并且windows中没有可以更改的方法, 所以参考了网上一些文章,终于修改成功,所以反馈进行分享,望国内开源风气如stackoverflow一样. 步骤 ...

  6. 【Leetcode】【Medium】Word Break

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  7. Lua的协同程序初探

    Content: 前两天把Lua的协同程序概念看了一下,不是很懂,只能说<Programming In Lua>中把它解释成线程让人很好的理解起来,但是真正去看的时候,收获并不是很大.第一 ...

  8. mysql登录:access denied for user 'root'@'localhost'(using password:YES)

    mysql登录: access denied for user 'root'@'localhost'(using password:YES) 解决: use mysql; select user,ho ...

  9. 查看Oracle表中的指定记录在数据文件中的位置

    查看Oracle表中的指定记录位置select rowid,user_id from sshr.xx_user where user_id=3010586 select rowid,       db ...

  10. dynamic_cast动态转换

    我们都知道dynamic_cast会在运行时进行类型检查,比较安全,static_cast静态转换,不安全 dynamic_cast转换的类型必须是个类,且这个类中必须有虚函数,为什么呢? 虚函数对于 ...