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. IE6 行内定义成块元素后高度失效

    问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度 ...

  2. Python入门-生成器和生成器表达式

    昨天我们说了迭代器,那么和今天说的生成器是什么关系呢? 一.生成器 什么是生成器?说白了生成器的本质就是迭代器. 在Python中中有三种方式来获取生成器. 1.通过生成器函数 2.通过各种推导式来实 ...

  3. 实现绘制图形的ToolBar

    给地图添加绘制图形的ToolBar还是有必要的,比较人性化的功能.图形的样式可以自己定制,也提供了朴实的默认样式.对 dojo 不太懂,出现了许许多多问题,真是蛋疼的一天啊.令人惊喜的是 ArcGis ...

  4. Codeforces Round #413 A. Carrot Cakes

    A. Carrot Cakes time limit per test   1 second memory limit per test   256 megabytes   In some game ...

  5. Spring @Value SpEl 知识点小记

    在JavaBean文件中使用Spring的@Value注解获取配置文件.yml或资源文件.properties中 key - value 键值信息 @Value("${stu.number} ...

  6. create-react-native-app

    create-react-native-app官网介绍链接,github文档,可以看看了解一下,总之是一个5分钟快速搭建react native项目并能看到效果的方法. 假设你已经安装了Node,你可 ...

  7. 自动下载和安装 MNIST 到 TensorFlow 的 python 源码 (转)

    # Copyright 2015 Google Inc. All Rights Reserved. # # Licensed under the Apache License, Version 2.0 ...

  8. typeof操作符和instanceof操作符的区别 标签： JavaScript 2016-08-01 14:21 113人阅读 评论(

    typeof主要用于检测变量是不是基本数据类型 typeof操作符是确定一个变量是字符串.数值.布尔类型,还是undefined的最佳工具.此外,使用typeof操作符检测函数时,会返回"f ...

  9. css文本过长如何设置省略号

    对于单行文本: 语法:  text-overflow : clip | ellipsis  参数:  clip : 不显示省略标记(...),而是简单的裁切  (clip这个参数是不常用的!)  el ...

  10. C/C++ 标准

    正式标准是需要付费的,不过可以在http://open-std.org/上找到标准的草案(和实际标准相差不大但是可以免费获取) 下面列出一下可能会用到的标准草案:C99:http://open-std ...