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. mybatis整合spring的时候配置数据库信息文件properties注意事项

    信息后面不能有空格 ,格式要xxx.driver xxx.url 这样

  2. css 元素居中各种办法

    一:通过弹性布局<style> #container .box{ width: 80px; height: 80px; position: absolute; background:red ...

  3. CentOS 7运维管理笔记(5)----源代码安装Apache 2.4,搭建LAMP服务器

    ##########################    2016-07-07-Thu--20:34 补充 ##################### 编译安装OpenSSL笔记: 如果系统要使用 ...

  4. .NET开源工作流RoadFlow-Bug修改-1.8.2表单验证时ueditor编辑非空验证无效

    RoadFlow生成的表单,Ueditor编辑器不能进行非空验证的BUG修改: 1.修改控制器:WorkFlowFormDesignerController红框处: 2.修改js文件:Scripts/ ...

  5. visual studio 2013的C++开发环境不错--vs2013安装试用手记

    原文:http://blog.csdn.net/haoyujie/article/details/24370189 从visual studio 体系,最后一次对C++实现了大的改进,那还是vs 7. ...

  6. Android Button事件处理

    一般只需要处理按钮的点击事件就可以,但想让一个按钮处理多个事件,就得同时监听多个方法. OnClickListener  点击事件 OnLongClickListener 长按事件 OnTouchLi ...

  7. gitlab 创建ssh步骤

    1.使用gitlab首先要创建ssh的公钥和私钥.创建ssh的步骤和命令如下: 打开git bash,我的是windows,切换到.ssh文件夹下.如果没有则创建.ssh(默认是没有这个文件夹的).检 ...

  8. shell----删除文件中的^M

    在Linux下使用vi来查看一些在Windows下创建的文本文件,有时会发现在行尾有一些“^M”.有几种方法可以处理. 1.使用vi的替换功能.启动vi,进入命令模式,输入以下命令: :%s/^M$/ ...

  9. zt C++ list 类学习笔记

    C++ list 类学习笔记 分类: C++ 2011-09-29 00:12 7819人阅读 评论(0) 收藏 举报 listc++iteratorvectorcconstructor 双向循环链表 ...

  10. SchemaSpy

    SchemaSpy https://github.com/schemaspy/schemaspy/releases https://sourceforge.net/projects/schemaspy ...