CSS总结

7人阅读 评论(1) 收藏 举报
分类:

概念:

      CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式应允许将样式信息与网页内容分离的一种标记性语言。


CSS的引入方式:

   行内样式

	<div style="width:100px;height:100px;background-color:red;"></div>

   内嵌样式

	<head>
	    <style type="text/css">
	      div{
	        width: 100px;
	        height: 100px;
	        background: red;
	      }
	    </style>
	</head>

   链接样式

	<head>
	    <link rel="stylesheet" type="text/css" href="css/style.css">
	</head>

   导入样式

	<head>
	    <style type="text/css">
	        @import "My.css"; 此处注意.css文件的路径
	    </style>
	</head>

导入方式优先级:

    1.就近原则
    2.理论上:行内>内嵌>链接>导入
    3.实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高
 

选择器

    通过选择器我们可以选出我们想要修改样式的标签,从而进行样式设计。CSS选择器主要分为以下三种:

   标签选择器

      会直接选择某一类标签,针对这一类标签全部生效。优先级:1

    类选择器

      使用类选择器时,需要我们给标签写上类名,如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签,同名 class 可以存在多个。优先级:10

    ID选择器

      使用 ID 选择器时,需要我们给标签写上 ID 名,如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签,同名 ID 只能存在一个。优先级:100

    选择器优先级:

     如果选择器优先级相同,谁后引入谁生效;
     如果选择器优先级不同,按照选择器优先级高低顺序生效
 

盒子模型

   HTML中的每一个标签都可以看做一个盒子模型,盒子模型由content、padding、border和margin四部分组成,如下图所示


  content:顾名思义即为内容部分。
  padding:即内边距用于控制内容(content)与边框(border)之间的距离;
  border:设置边框的样式;

  margin:即外边距用于控制元素与元素之间的距离。

例子

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html> 

小结

       暂时就总结这些,在日后的学习中不断积累!

查看评论

明盒开发

明盒开发未经允许,严禁转载本栏目内容本文经许可转载自软件工程专家网www.21cmm.com,未经CSDN许可,请勿随便转载,谢谢合作(一) 明盒结构  明盒定义了实现转换状态盒功能的过程。明盒和相应...
  • gigix
  • gigix
  • 2002-03-14 10:15:00
  • 1693

CSS经典总结

  • 2011年09月29日 18:31
  • 2.36MB
  • 下载

CSS常见布局总结

css实现水平垂直居中布局小结
  • liujie19901217
  • liujie19901217
  • 2016-03-15 13:31:30
  • 814

HTML、CSS知识点总结,浅显易懂。

一,html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1. HTM...
  • smy000
  • smy000
  • 2017-05-04 21:26:52
  • 423

Div+CSS总结

之前最早接触是在牛腩新闻发布系统中,当时看到这些自己是一头雾水,不过好在我们已经形成了这样的学习习惯,先实践在接触理论,这样再学习理论的时候就会想到当初我是怎样的迷茫,这样自己印象更深刻。     D...
  • u013038643
  • u013038643
  • 2015-11-29 21:10:26
  • 1027

html与css阶段学习总结

第四阶段总结本应该在开学前就结束的Html和Css阶段,硬生生地拖了2周才考核完,并且任务完成总量还是比较少。外因是刚开学,各种各样的杂事太多,处理上有一些不适应。内因则是个人学习积极性的不足。此处则...
  • syhdeclan
  • syhdeclan
  • 2018-03-21 16:49:21
  • 37

CSS中盒子模型的总结

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。...
  • u014745194
  • u014745194
  • 2017-06-03 18:08:38
  • 594

关于css样式总结

表单样式表移除input=number的上下箭头在chrome下:input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{...
  • leo8729
  • leo8729
  • 2016-10-08 15:34:04
  • 334

史上最全的HTML、CSS知识点总结,浅显易懂。

Javaweb、HTML+css知识点总结,浅显易懂,你把这些看完了,HTML和css知识点你也就会了。...
  • qiushi_1990
  • qiushi_1990
  • 2014-10-19 10:00:23
  • 11749

01_HTML与CSS.xmind

  • 2016年11月16日 10:55
  • 1.17MB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 3640
    排名: 1万+
    最新评论