CSS Cascading Style Sheet 层叠样式表

Css创建

外部样式表(样式表应该以 .css 扩展名进行保存)

code

<head>

	<!--方式一 link-->

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

	<!--方式二 @import-->

	<style type="text/css">

		/*

			import 放在首行

			该指令也可以放在CSS文件引用其它css文件

			相对路径的根 为使用该指令的文件

		*/

		@import url("mystyle.css");

	</style>

</head>

link解析:

  • link引用外部文件

    • 在 HTML,link标签没有结束标签。
    • 在 XHTML,link标签必须被正确地关闭。
  • rel即relationship ,意思是引用的文件与html的关系
  • type即文件类型
  • href 即Hypertext Reference的缩写,意思是指定超链接目标的URL

内部样式表

<head>

	<style type="text/css">

		hr { color:sienna; }

		p { margin-left:20px; }

		body { background-image:url("images/back40.gif"); }

	</style>

</head>

内联样式

<p style="color:red;margin-left:20px">Test</p>

层叠次序(优先级)

  1. 内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设置
  2. 后加载的css比先加载的优先(后面的css会覆盖掉前面的css)
  3. id > class > 元素(选择器)
  4. !important 最优先

选择器

选择器解析

<style type="text/css">

	/*通配选择器 默认设为灰色*/

	* {

		font-size:12px;

		color:grey;

	}

	/*元素选择器*/

	h1 {

		color:red;

	}

	/*分组选择器*/

	h2,h3{

		color: green;

	}

	/*类选择器*/

	.class-test {

		color:blue;

	}

	/*id选择器 id应该确保唯一,浏览器不会作检查 */

	#mydiv{

		font-weight:bold;

		font-size:18px;

	}

	/*属性选择器  */

	div[class="arr1"] {

		color:coral;

	}

	/*属性选择器要全匹配 该css匹配不了 arr2 arr3 需要完全相等才起效果*/

	div[class="arr2"]{

		color:red;

	}

	/*部分匹配运算符 多个值中只有包含该值即可*/

	div[class~="arr2"]{

		background:blue;

	}

	/*部分字符匹配*/

	/*开头包含值*/

	div[class^="tes"]{

		background:red;

	}

	/*结尾包含值*/

	div[class$="y"]{

		font-size:18px;

	}

	/*包含值*/

	div[class*="-arr"]{

		color:green;

	}

	/* 后代选择器 */

	div span{

		color:red;

	}

	/* 子元素选择器  选择所有符合的子元素*/

	div[class="mytest-1"]>em{

		color:blue;

	}

	/*兄弟选择器 选择所有符合的第一个兄弟元素*/

	p+p{

		color:orange;

	}

	p[class="myp"] +p{

		background:grey;

	}

</style>

<p>通配选择器:p元素</p>

<h1>元素选择器: h1元素</h1>

<h2>分组选择器:h2元素</h2>

<h3>分组选择器:h3元素</h3>

<div class="class-test">class 选择器: div class=class-test</div>

<div id="mydiv">id选择器: div id=mydiv</div>

<div class="arr1">属性 选择器: div class=arr1</div>

<div class="arr2 arr3">属性选择器要全匹配 : div class=arr2 arr3</div>

<div class="test-arr my">部分字符匹配 选择器: div class=arr2 arr3</div>

<div>

	后代选择器:

	<span>span1</span>

	<span>span2</span>

	<p>p<span> span3</span></p>

</div>

<div class="mytest-1">

	子元素选择器:

	<em>em1</em>

	<em>em2</em>

	<p>p<em> em3</em></p>

</div>

<div>

	<p class="myp">p1</p>

	<p>p2</p>

	<p>p3</p>

</div>

选择器效果预览

伪类&伪选择器

链接伪类

  1. :link 未访问的超链接(a标签)
a:link { color:red; }
  1. :visited 访问过的超链接
a:visited{ color:orange; }

动态伪类

  1. :focus 输入焦点状态(适用于输入元素)
  2. :hover 鼠标悬停
  3. :active 用户激活状态的元素

链接伪类与动态伪类混合使用

按照顺序编写 :link-visited-hover-active

盒子模型

注意事项

css语句之间记得添加 ;号

否则会使css出现错误

width:100%; 再添加横向距离(padding)会出现滚动条

解决方法:

添加box-sizing: border-box;

demo

.header{

	height:40px;

	width: 100%;

	padding-left: 50px;

	background: gray;

	box-sizing: border-box;

}

垂直居中

使line-hight 等于父容器的height

CSS 基础的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  10. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. C#反射通过类名的字符串获取生成对应的实例

    在.net core 1.1环境下 今天项目中遇到这个问题了,稍微查了一下并没有现成的样例.自己实现了. static void Main(string[] args) { TestGetAssemb ...

  2. 【JAVAWEB学习笔记】05_jQuery基础

    晨读单词: toggle:切换 each:每个(遍历) append:追加(内部追加,将B追加到A的内部结尾处) appendTo:追加(内部追加,将A追加到B的内部结尾处) prepend:追加(内 ...

  3. tomcat类加载体系

    类加载,再来一发. 研究完java提供的类加载机制,再来看看tomcat开出了那些花. 最近开始读tomcat的源码,主线路当然是类加载机制,在这个过程中有豁然开朗的感觉.这一篇主要是自己的体会,而不 ...

  4. 分布式Java应用与实践 (一)

    一) 分布式Java应用 1.1 基于消息方式实现系统间的通信 数据传输 TCP/IP 可靠的网络传输协议,首先给通信双方建立链接之后再进行数据传输,保证链接及数据传输的可靠,因此会牺牲一些性能 UD ...

  5. iOS storyBoard中tableViewCell传值方法

    一般在storyboard中传值通过identifier的值来控制segue的跳转和传值,但是,如果在tableView中,由于cell特别多,不可能创建n个identifier标识符,这里通过NSI ...

  6. ArrayList源码解析（三）

    1.isEmpty()  如果此列表中没有元素,则返回 true /** * Returns <tt>true</tt> if this list contains no el ...

  7. 开涛spring3(5.4) - Spring表达式语言 之 5.4在Bean定义中使用EL

    5.4.1  xml风格的配置 SpEL支持在Bean定义时注入,默认使用“#{SpEL表达式}”表示,其中“#root”根对象默认可以认为是 ApplicationContext,只有Applica ...

  8. 【面向对象设计原则】之接口隔离原则(ISP)

    接口隔离原则(Interface  Segregation Principle, ISP):使用多个专门的接口,而不使用单一的总接口,即客户端不应该依赖那些它不需要的接口. 从接口隔离原则的定义可以看 ...

  9. openfire muc 移除成员

    muc添加成员到数据库可参考 将Openfire中的MUC改造成类似QQ群一样的永久群 插件 插件是一位大神参考第一篇文章改进后编写的插件,进测试可以直接使用. ------------------- ...

  10. 使用wamp扩展php时出现服务未启动的解决方法

    今天在使用wamp扩展php的插件时,出现了如下图所示的错误提示 网上查了查,都说是端口原因,修改Apache的 80端口,但是并没有解决问题. 最后我终于找到了解决方法,步骤很简单,如下: 首先,在 ...