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. BZOJ2882: 工艺(后缀数组)

    题意 题目链接 Sol 直接把序列复制一遍 后缀数组即可 在前\(N\)个位置中取\(rak\)最小的输出 #include<bits/stdc++.h> using namespace ...

  2. FeatureLayer 里属性数据的提取与显示

    我们用工程文件所发布的WebServer下,包含一个个图层,这些图层根据顺序进行了 0 开始的编号,这些就是FeatureLayer的地址了! FeatureLayer 包含了地图的属性信息,十分好用 ...

  3. 06_javassist

    [简述] Javassist是一个开源的java字节码操作工具,主要是对已经编译好class文件进行修改和处理,可以直接检查.修改.创建 java类. [javassist实例] package co ...

  4. AndroidStudio安装教程

    Android studio安装与配置 1.首先下载Android studio安装包,可以从http://www.android-studio.org/ 2.下载好该安装包之后,点击进行安装,依次出 ...

  5. 二十、滑动开关css

    如上图所示的图片,如何通过css实现呢? 下面咱们慢慢尝试: html: <div class="togglePosition"> <label class=&q ...

  6. 正则去除html标签属性保留指定标签

    /// <summary> /// 去除标签里面的属性保留IMG标签属性 /// </summary> /// <param name="strText&quo ...

  7. golang 安装 guru vscode 安装失败

    1.先从git上复制下来 git clone https://github.com/golang/tools 2.再$GOPATH/bin中安装 go install golang.org/x/too ...

  8. nest 排序

    var result = client.Search<Person>(x => x.Index("personindex").Type("persont ...

  9. 微软操作系统 Windows Server 2012 R2 官方原版镜像

    微软操作系统 Windows Server 2012 R2 官方原版镜像 Windows Server 2012 R2 是由微软公司(Microsoft)设计开发的新一代的服务器专属操作系统,其核心版 ...

  10. PHP实现无限分类

    PHP实现无限分类 无限分类 递归 无限级分类是一种设计技巧,在开发中经常使用,例如:网站目录.部门结构.文章分类.笔者觉得它在对于设计表的层级结构上面发挥很大的作用,比如大家在一些平台上面,填写邀请 ...