CSS基础(一)
一、CSS概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
二、CSS语法
CSS的语法由两部分组成:选择符(selector)和声明(declaration),声明由一个或者多个属性值组成。
选择符{ 属性:属性值; 属性:属性值; 属性:属性值;
}你
三、选择符的种类
1.基本选择符
基本选择符包括标签选择符、id选择符和class类选择符
1)标签选择符
标签选择符是以文档对象模型(DOM)作为选择符——即选择某个HTML标签作为对象,设置其样式规则。
例如:
div{
boder:3px double #f00;
width:680px;
}
2)id选择符
id选择符用来对单一的某个元素单独的设置样式,只能在HTML页面中使用一次,针对性更强。id选择符在定义时要在前面加#,使用时不用加#。
例如:
<style type="text/css">
#top{
line-height:20px;
margin:15px 0px 0px 0px;
font-size:24px;
color:#F00;
}
<!--下为调用-->
<div id="top">……</div>
3)class类选择符
class类选择符用来定义HTML页面中需要特殊表现的样式,也称为自定义选择符,使用该方式定义时要在元素前加“.”,元素名称可以自定义。
例如:
<style type="text/css"
.blue{
color:#F00;
}
2.复合选择符
复合选择符包括交集选择符、并集选择符和后代选择符。
1)交集选择符
交集选择符由两个选择符直接相连构成,其中一个必须是标签选择符,另一个必须是类选择符或者id选择符,结果是选中二者各自元素范围的交集。
例如:
css:
p {
color:#00F;
border:1px solid;
}
p.m{
color:#C03;
}
代码中:
<p>1</p>
<p class="m">2</p>
<p>3</p>
结果图:
2)并集选择符
并集选择符又称为“集体声明”,就是让几组选择符共享同一个声明。
例如:
CSS:
h1,h2,h3{
color:#00F;
text-decoration:underline;
}
h2.s{
color:#F3C;
}
代码中:
<h1>1</h1>
<h2 class="s">2</h2>
<h2>3</h2>
<h3>4</h3>
结果图:
3)后代选择符
当标签发生嵌套时,内层的标签会自动成为外层标签的后代,使用后代选择符可以简化代码,实现大范围的控制。
例如:
CSS:
p {
color:#00F;
text-decoration:underline;
}
p span{
color:#F3C;
}
代码中:
我想大喊两声:<p>Hello World!</p>
<p><span>Hello World!</span></p>
结果图:
3.通用选择符
通用选择符分为通配符选择符和通用兄弟元素选择符。
1)通用符选择符
通用符“*”是一种特殊的选择符,可以定义所有元素样式。
例如:
CSS部分:
<style type="text/css">
*{color:#000;}
p{color:#00f;}
p *{color:#F00;}
</style>
代码部分:
<h2>111</h2>
<p>222</p>
<p><span>333</span></p>
效果图:
2)通用兄弟选择符
通用兄弟选择符用于同一父类元素下某元素后其他所有某一兄弟元素的样式。格式是:
E~F{ }
例如:
CSS:
<style type="text/css">
div~span{ color:#F00;}
</style>
代码段:
<div style="font-size:12px; border;">
<div>
<span>测试</span>
<p>测试</p>
</div>
<span>测试</span>
<hr />
<span>测试</span>
</div>
结果图:
4.特殊选择符
1)伪类选择符
伪类选择符是一种特殊的类选择符,能被支持CSS的浏览器直接识别,其最大的作用是对连接在不同效果下定义不同的样式。
例如:
CSS部分:
<style type="text/css">
a:link{color:#000;}
a:visited{color:#C0C;}
a:hover{color:#399;font-size:18px;border:1px #006;}
a:active{color:#F00;}
</style> 代码部分:
<a href="#">来试试吧</a>
结果图:
2)伪元素选择符
与伪类选择符差不多,伪元素选择符通过对插入文档的虚拟元素进行触发,从而达到某些效果。格式如下:
选择符:伪元素{}
常用伪元素如下:
first-letter | 将特殊样式添加到首字母 |
first-line | 将特殊样式添加到首行 |
before | 在某些元素前插入某些内容 |
after | 在某些元素后插入某些内容 |
例如:
CSS部分:
<style type="text/css">
h4:first-letter{color:#F00;font-size:36px;}
p:first-line{color:#63F;}
</style> 代码部分:
<h4>开开心心劳动节</h4>
<p>可惜梦想在前方</p>
结果图:
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可以更 ...
随机推荐
- mongodb-win
http://www.cnblogs.com/clsn/p/8214194.html#auto_id_22 Mongodb的作用: 用于对象及JSON数据的存储,它存的都是对象比如字典, 数据库,无论 ...
- JMeter(2) 集成jmeter+ant+jenkins
一.ant安装 $su root $vi /etc/bashrc 插入两行(i+enter插入) export ANT_HOME=/usr/local/apache-ant-1.9.3 export ...
- 长春理工大学第十四届程序设计竞赛(重现赛)L.Homework Stream
链接:https://ac.nowcoder.com/acm/contest/912/L 题意: 作为大珩班尖子生,小r每天有很多作业要完成,例如工图.工图和工图. 很显然,做作业是要有顺序的.作业之 ...
- Core中使用Razor视图引擎渲染视图为字符串 阅读目录
Core中使用Razor视图引擎渲染视图为字符串 } <!DOCTYPE html> <html> <head> <title>Render view ...
- EOJ Problem #3261 分词 trie + dp + 小剪枝
http://acm.ecnu.edu.cn/problem/3261/ 分词 Time limit per test: 1.0 seconds Time limit all tests: 1.0 s ...
- 一步步实现自己的ORM(二)
在第一篇<一步步实现自己的ORM(一)>里,我们用反射获取类名.属性和值,我们用这些信息开发了简单的INSERT方法,在上一篇文章里我们提到主键为什么没有设置成自增长类型,单单从属性里我们 ...
- IOC的使用
1.概要: 在spring中,都是使用反射机制创建对象,将创建对象的权利交给spring容器,就是控制反转(ioc) 对象创建方式 有参构造 无参构造 工厂模式(静态,非静态) 2.创建IDEA控制台 ...
- 字符串和byte数组的相互转化
关于byte[]数组转十六进制字符串: public static String getHexString(byte[] b) throws Exception { String result = & ...
- javaweb-servlet生成简单的验证码
package com.serv; import java.awt.Color; import java.awt.Graphics; import java.awt.image.BufferedIma ...
- PHP_RAW_POST_DATA特性
在PHP5.6.x中已废止特性 使用 always_populate_raw_post_data 会导致在填充 $HTTP_RAW_POST_DATA 时产生 E_DEPRECATED 错误. 请使用 ...