CSS 基础
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>
层叠次序(优先级)
- 内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设置
- 后加载的css比先加载的优先(后面的css会覆盖掉前面的css)
- id > class > 元素(选择器)
- !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>
选择器效果预览
伪类&伪选择器
链接伪类
- :link 未访问的超链接(a标签)
a:link { color:red; }
- :visited 访问过的超链接
a:visited{ color:orange; }
动态伪类
- :focus 输入焦点状态(适用于输入元素)
- :hover 鼠标悬停
- :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 基础的更多相关文章
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- css基础不扎实
写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
随机推荐
- GTD:让大脑用来思考,而不是用来记事!
前段时间听刘润大师分享了一套GTD时间管理方法理论,感觉非常受用!现拿来跟大家分享下,这套方法是刘润老师践行20多年总结提炼的精华,经亲自实践确实行之有效. 俗话说:工欲善其事,必先利其器!人生也是如 ...
- prop()、attr()和data()
设置元素属性,用attr()还是prop()? 对于取值为true /false的属性,如 checked/selected/readonly或者disabled,使用prop(),其他属性使用 at ...
- slideToggle+slideup实现手机端折叠菜单效果
折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...
- 刨根究底字符编码之八——Unicode编码方案概述
Unicode编码方案概述 1. 前面讲过,随着计算机发展到世界各地,于是各个国家和地区各自为政,搞出了很多既兼容ASCII但又互相不兼容的各种编码方案.这样一来同一个二进制编码就有可能被解释成不 ...
- 代码检查工具jshint和csslint
前面的话 Douglas Crockford大神根据自己的理念用JavaScript写了一个JavaScript代码规范检查工具,这就是JSLint.后来非常流行,也的确帮助了广大的JavaScrip ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
- loadrunner提高篇-结果分析实践
分析图合并 一.分析图合并原理 选择view->merge graphs,弹出如图1所示对话框 图1(设置合并图) 1.选择要合并的图.选择一个要与当前活动图合并的图,注意这里只能选择X轴度量单 ...
- Java之枚举
1.定义 enum 是一种数据类型,与 全局常量比较相似,都是全局的并且是可以通过类名调用的 与全局常量区别 枚举功能更强大,可以有属性和方法 枚举比全局常量更加的规范 2.枚举特性 1)可以有属性以 ...
- jQuery链式操作如何返回上一级DOM
有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...
- git使用方法1
1.新建一个“本地仓库” $ git init 2.配置仓库 >告诉git你是谁 git config user.name lnj >告诉git怎么联系你 git config user. ...