css基础--简单介绍css

--引入

什么是css？

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

　　样式表定义如何显示 HTML 元素,html标签定义了网页的骨架，而css的作用就是为骨架穿上衣服。并且样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观（也就是为众多骨架同时穿上同一件衣服）。

css语法：

　　css语法主要由两部分组成：选择器和声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

selector  {

    property1:value1     /*第一条声明*/

    property2:value2　　　/*第二条声明*/

    ……

}

选择器常见的有三种：

　　1 html元素

　　2 id选择器

　　3 class选择器

先来看第一种。html元素可以当选择器，也即是说body p br hr tr td table……都可以作为选择器。

例子1：让所有的段落字体颜色为红色（段落也就是p）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first page</title>

    <style>

        p {

            color: red;

        }

    </style>

</head>

<body>

<h1>test</h1>

<li>haha</li>

<p>hello world</p>

</body>

</html>

段落字体为红色

浏览器显示：

-------------------------------分割线----------------------------------

再来看第二种--id选择器

我们知道，html元素可以使用id属性来标识自身，id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。（ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用）

另外：id 属性只能在每个 HTML 文档中出现一次！！

例子2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first page</title>

    <style>

        #hw {

            color: greenyellow;

        }

    </style>

</head>

<body>

<h1>test</h1>

<li>haha</li>

<p id="hw">hello world</p>

</body>

</html>

让id为hw的元素内的字体颜色为黄绿色

浏览器显示：

-------------------------------分割线----------------------------------

接下来就是第三种选择器--class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用

例子3：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>first page</title>

    <style>

        .example {

            color: blue;

        }

    </style>

</head>

<body>

<h1>test</h1>

<li>haha</li>

<p class="example">hello world</p>

</body>

</html>

让引用名为example类的元素中字体颜色为蓝色

浏览器显示：

选择器的组合方式

介绍完了选择器类型，那就来说说选择器的组合方式吧。（这一部分不适合初学者看，可以先了解选择符的组合方式，等对css各属性有所了解后再看更好）

在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

1 后代选择符

匹配后面的元素，但仅仅是那些被前面元素嵌套包含的后面元素。例如：div p{} 表示div内嵌套的p元素生效。

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    div p{

        color:red;

        background-color: yellow;

    }

</style>

</head>

<body>

<div><p>hello world</p></div>

<p>hello world</p>

</body>

</html>

后代选择符实例

2 子元素选择符

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接子元素的元素。

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    div a{

        color:red;

        background-color: yellow;

    }

    div>a{

        color:green;

        background-color: antiquewhite;

    }

</style>

</head>

<body>

<div><p>hello world<a href="http://baidu.com" target="_parent"/>BaiDu</p></div>

<div><p>hello world<a href="http://baidu.com" target="_parent"/>BaiDu</p></div>

<div><a href="http://baidu.com" target="_parent"/>BaiDu</div>

</body>

</html>

子元素选择符与后代选择符比较

3 相邻兄弟选择符---第一个兄弟选择符

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    div+p{

        color:red;

        background-color: yellow;

    }

</style>

</head>

<body>

<div><p>hello world</p></div>

<p>hello world</p>

</body>

</html>

相邻兄弟选择符实例

4 普通兄弟选择符----兄弟连选择符

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

<!DOCTYPE html>

<html lang="en">

<head>

<style>

    div~p{

        color:red;

        background-color: yellow;

    }

</style>

</head>

<body>

<div><p>hello world</p></div>

<p>hello world</p>

<p>hello world</p>

</body>

</html>

普通兄弟选择符实例

--如何插入样式表

插入样式表主要有三种：

　　1 内部样式表

　　2 外部样式表

　　3 内联样式　　　　

1 内部样式表：

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

在上面的三个例子中，我们都是使用的内部样式表。内部样式表的格式：

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

</style>

</head>

2 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>

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

</head>

　　href: URL 指定被连接文档的地址

　　type：MIME_type 指定被连接文档的MIME类型

　　rel：有很多值（详见下图）指定当前文档与被链接文档的关系

3 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

继承优先级(由低到高)：

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

另外，若多个css样式定义了同一个元素，则按照权值选择css样式，权值排序(由低到高)：

　　1 标签，权值为1

　　2 类选择符，权值为10

　　3 ID选择符，权值为100

我们也可以为某些样式设置最高权值：

　　p{color:red!important;} 注意，分号在!important后面

css基础--简单介绍css的更多相关文章

[CSS布局]简单的CSS三列布局
前言公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
CSS基础语法和CSS经常用到的知识点总结
1. [代码]css基础教程 CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代 ...
CSS基础(html＋css基础)
css: CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 1.CSS代码语法: css ...
HTML 网页开发、CSS 基础语法——十.CSS语法
CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...
CSS基础3——使用CSS格式化元素内容的字体
1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...
CSS基础语法(三) CSS的6种特性
样式表常用写法及特性(组合.继承.关联性.权值性.层叠性.重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开.-例如:段落元素p.单元格元素td和类c1可以使用相同样式: p ...
CSS基础语法(一) CSS的3种引入
CSS样式表 CSS可算是网页设计的一个突破,它解决了网页界面排版的难题.可以这么说,HTML的Tag主要是定义网页的内容(Content),而CSS决定这些网页内容如何显示(Layout). Web ...
CSS基础4——使用CSS格式化元素内容的文本
CSS的文本属性用于控制文本的段落格式,如设置首行缩进.段落对齐方式.字间距.行间距等. 1.设置文本首行缩进:text-indent 可选属性值包含: 长度 / 百分比 2.设置文本对齐方式:tex ...
CSS基础学习 21.CSS居中总结
注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...

随机推荐

2017年10月WEB前端开发实习生面试题总结
从大一开始学习前端,今年大三,10月份开始投简历,陆续收到很多家公司的面试,目前为止的面试通过率是百分之百,总结下面试题. 不定期更新中... 百度第一次一面 1.AJAX流程 2.promise简 ...
BugPhobia开发篇章：Scurm Meeting-更新至0x03
0x01 :目录与摘要 If you weeped for the missing sunset, you would miss all the shining stars 索引提纲整理与更新记录 ...
Scrum Meeting 10.22
Scrum Meeting No.2 今天的主要任务是配置安卓开发环境,并运行上一届的项目. 主流的安卓开发环境有eclipse+ADT+SDK和android studio两种.两种环境的文件架构似 ...
始入OO课程的殿堂，初识面向对象的奥妙——OO第一次博客总结
当我满怀期待叩开OO的大门,却发现宝藏藏在层层阻难之后第一次作业 1.度量分析 >关于第一次作业的metrics图分析没有出现标红的McCabe Cyclomatic Complexity或者 ...
20172325 2016-2017-2 《Java程序设计》第四周学习总结
20172325 2016-2017-2 <Java程序设计>第四周学习总结教材学习内容总结 1.对类.对象.声明变量的定义和属性有了进一步的了解 2.学会如何编写一个类并运用到需要的程 ...
Task 6.4 冲刺Two之站立会议5
在完成主界面和聊天窗口的连接之后,今天对聊天界面在以前的基础上添加了很多东西,比如说对于文件传输和文字通信时的表情包的添加以及抖动窗口的设置等等一一系列的功能.我完成的是文字通信这一部分的内容.
C++ MOOC
相关课程列表: C++远征之起航篇 C++远征之离港篇 C++远征之封装篇上 C++远征之封装篇下 C++远征之继承篇 C++远征之多态篇授课老师:james_yuan 在寒假,我主要选择 C+ ...
iOS UIView性能最优的设计圆角并且绘制边框颜色
//以给cell切圆角为例- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollection ...
词频统计Web工程
本次将原本控制台工程迁移到了web工程上.. 需求: 1.把程序迁移到web平台,通过用户上传TXT的方式接收文件: 2.在页面上给出链接 (如果有封皮.作者.字数.页数等信息更佳)或表格,展示经典英 ...
关于Jquery使用中遇到典型问题集锦
①$.post("url",{search:1},function(){},"json")请求数据成功就是不执行回调函数? 答:最大可能导致原因为数据格式不正 ...

css基础--简单介绍css

css基础--简单介绍css的更多相关文章

随机推荐

热门专题