css 基础(一)
一、css样式表的分类
首先介绍一下css中的样式表 a、外部样式表 将需要的样式放在单独的外部文件中,需要使用是直接调用,通常放在.css文件中。例如:/*以下部分是放在(my.css)自定义名称的css文件中*/
h1,h2,h3{color:blue;}
h1{font-size:18px;}
h2{font-size:35px;}
p{font-size:10px;}
注意:.css文件中不需要写头文件等内容,直接开始写样式内容即可。
/*以下部分是在html中调用上面的.css文件*/
在<head></head>中间添加 <link rel="stylesheet" type="text/css" url="my.css (样式表的地址)" />
b、嵌入式样式表
格式
<head>
<style type="text/css"> 该处是嵌入的样式内容 ,例如 #id={color:red;}</style>
</head>
注意:文档的<style >段必须写在<head></head>之间,可以有多个<style >段。
c、内联样式表
例如:<h1 style="color:red;">红色的标题</h1>
该样式表仅用于某一部分网页元素,在新的web标准中,最好把样式放在<style>或者外部样式表文件中使用。
一个样式规则由一个选择器和一个申明块组成。
二、选择器的分类
1、元素选择器又称为类型选择器
例如:em{cloor:red;}
p{font-size:10px;}
即表示在<body>中所有的em元素的字体全部设置为红色,所有的段落<p>字体大小设置为10px.
2、类选择器(class属性)
语法格式: .类名{属性:值}
例如:<html>
<head>
<title>类选择器使用</title>
<style>
.big {color:red}
</style>
<body>
<p class="big"></p>
</body>
</head>
</html> /*该程序表示将段落p的字体颜色改为红色*/
3、ID选择器(与类选择器类似,即可被用于选择有ID属性的HTML元素)
语法: #id名称 {属性:值;}
例如:在<style></style>之间写 #navigation {width:200px;color:#333;}
在主程序中 <body></body>中间即可调用上面的navigation <div id="navigation"></div>
4、包含选择器
例如:em{color:red}
表示在整个程序中,所有em元素的字体均设置为红色;
p em {coloe:red}
仅仅表示段落<p>中的<em>元素字体设置为红色,而其他可能存在的<div>或者其他元素的字体颜色不变。
5、通配符选择器 (*)
通配符选择器用于选择所有元素
例如: *{color:red;}
整个显示的页面字体设置均为红色。
6、伪类选择器(常使用的是与<a>元素相关的超级链接 伪类选择器)
a {} 不论链接状态如何,均可设置
a:link {} 用在未访问的链接的选择器
a:visited {} 用在已访问过的链接的选择器
a:hover {} 当鼠标放在访问地址上的链接的选择器
a:active {} 当鼠标点击访问地址是的链接的选择器
(上述的后面四种状态可 进行组合,但是顺序必须按照上面的顺序写)
a:link,a:visited {color:red;}
a:hover,a:active {color:blue;}
7、伪元素选择器
标准的选择器不能格式化一个元素的第一个字母或者第一行,而伪元素可以进行该操作;
在伪元素选择器中被所有浏览器支持的有两种:first-line first-letter
p:first-line {font-weight:bold} (段落的第一行)
p:first-letter {font-size:200%;font-weight:bold;} (段落的第一个字母)
看这里啦:one:类选择器可以在一个文档内根据需要多次使用,而同一个ID选择器只能再文档中应用一次;
two:对于同一个HTML元素,可使用多个类选择器格式化,而只能使用一个ID选择器;
three:当类选择器与ID选择器的声明有冲突是,优先选择ID选择器的声明。
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可以更 ...
随机推荐
- js函数变量
局部 JavaScript 变量 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局部 ...
- Vmware虚拟机时间不准问题
测试程序时碰到虚拟机经常时间不准,深受困扰,后来发现虚拟机有一个设置可以同步虚拟机和宿主机的时间: 该功能需要vmware tools安装成功才能有效.vmware tools的安装就不多细说了,至于 ...
- IOS 学习笔记(7) 控件 分隔栏控件(UISegmentControl)的使用方法
分隔栏控件的系统默认式样一共有3种,分别是“普通式样”,"边框式样","条状式样" 分隔栏控件中有一个momentary属性,默认时NO.当开发者配置成YES时 ...
- C++ 面向对象学习2 构造方法
Date.h #ifndef DATE_H #define DATE_H class Date{ public: Date(,,);//自定义了构造方法 会覆盖掉默认的无参构造方法 void setD ...
- Codecs是以plugin的形式被调用的(显示中文的codec plugin文件是qcncodecs4.dll),可静态载入和动态载入
作为非英语国家人员开发的类库,QT有充分的理由优先考虑支持Unicode和各国自定义字库编码.大家也知道了QT对软件Internationalization有一套完整的开发模型,包括专门为此写的lin ...
- sed 文件查找,替换
sed 命令查找与替换: (1)删除第2,3行:sed '2,3d' test.txt > new.txt (2)替换: 替换所有:sed 's/abc/ABC/' test.txt > ...
- python下yield(生成器)
python下的协程: #encoding=utf-8 """ 协程----微小的进程 yield生成器-----生成一个可迭代对象比如list, tuple,dir 1 ...
- [Asp.net]常见word,excel,ppt,pdf在线预览方案(转)
引言 之前项目需要,查找了office文档在线预览的解决方案,顺便记录一下,方便以后查询. 方案一 直接在浏览器中打开Office文档在页面上的链接.会弹出如下窗口: 优点:主流浏览器都支持. 缺点: ...
- asp.net根据模版生成Word小记
最近遇到一个问题,客户提了一个新的需求,客户想要将显示在网页上的数据导出成Word进行套打,由于之前没有接触过这一块的内容,自己写的系统也没有使用这种功能,现在重头学习. 具体思路: 1.先制作Wor ...
- SQL数据库语句练习题目
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...