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. Web前端面试指导(十三)：css样式的优先级是怎么样的？

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  2. 多尺度几何分析（Ridgelet、Curvelet、Contourlet、Bandelet、Wedgelet、Beamlet）

    稀疏基的讨论已经持续了近一个月了,这次讨论多尺度几何分析.但由于下面讨论的这些变换主要面向图像,而本人现在主要关注于一维信号处理,所以就不对这些变换深入讨论了,这里仅从众参考文献中摘抄整理一些相关内容 ...

  3. 各种优化方法总结比较（sgd/momentum/Nesterov/adagrad/adadelta）

    前言 这里讨论的优化问题指的是,给定目标函数f(x),我们需要找到一组参数x,使得f(x)的值最小. 本文以下内容假设读者已经了解机器学习基本知识,和梯度下降的原理. SGD SGD指stochast ...

  4. EditText的setInputType方法里面应该填什么？

    转自CSDN:http://blog.csdn.net/u014158743/article/details/52488010 | 以密码类型(password)为例 android:inputTyp ...

  5. Redux学习笔记-基础知识

      Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...

  6. Linux的inode的理解 ZZ

    文件名 -> inode -> device block 转自:http://www.ruanyifeng.com/blog/2011/12/inode.htmlhttp://blog.s ...

  7. 【深入理解JAVA虚拟机】第二部分.内存自动管理机制.4.JVM工具

    1.概述 工具作用:性能监控与故障处理 工作原理:分析数据 数据包含:运行日志. 异常堆栈. GC日志. 线程快照(threaddump/javacore文件). 堆转储快照(heapdump/hpr ...

  8. 如何用SAP Cloud for Customer的手机App创建销售订单

    第一次启动App,设置一个初始化的pin code: 输入C4C tenant的url,用户名和密码: 登录进系统后,找到Sales Order工作中心: 可以看到系统里很多已有的销售订单了.点击屏幕 ...

  9. 阿里云免费ssl，https证书的申请和校验

    其实写这个之前一直在考虑要不要写出来 ,真的官方文档实在太强大了,连视频都给你录好了,配不好的,是不是可以考虑不用写程序了, 忽然想到第一次使用微信测试号,进行域名认证的时候,因为后台返回“echar ...

  10. 不错的.net开源项目

    Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...