CSS介绍

CSS是指层叠样式表，CSS样式表极大的提高了工作效率

CSS基础语法
1. 首先选择一个属性
2. 选择了属性以后，用大括号括起来
3. 括号里面是对应的属性和属性值，如：

selector {

    property: value;

}

举一个实际的例子，就像这样：

h1是属性，然后一个大括号，括号中的color是属性，后面跟着对应的属性值red，设置结束后需要用;来分别各个属性

h1 {

    color: red;

    font-size: 14px;

}

使用CSS样式：

需要在html中来使用CSS样式，可以用<link>标签来调用CSS文件，如：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

        <!-- 调用CSS样式表 -->

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

    </head>

    <body>

        <h1>我被CSS改变了。</h1>

    </body>

</html>

CSS选择器分组：

选择器分组就是将一堆页面元素，一起定义：

h1, h2, h3, p, a{

    color: red;

    font-size: 14px

}

CSS派生类选择

根据元素在其位置的上下文关系来定义样式，就比如标签中的标签，如果直接定义body元素，就会把其中所有的值都改变，但是单单针对某些元素来定义，也是可以的。当然针对一个元素定义的样式的优先级，要比定义<body>全部样式的优先级高。所以即使是<body>修改了样式，也可以针对单个元素进行修改。

如下代码：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

        <!-- 调用CSS样式表 -->

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

    </head>

    <!-- 标签中的标签 -->

    <body>

            <p>我是小p，我是body p{}指定的标签改变的</p>

            <h1>我是标题</h1>

    </body>

</html>

然后我们用CSS样式来修改

body{

    color: green;

}

body p{

    color: red;

}

可以看到，将body全部定义成绿色了，但是如果指定body中的p元素进行定义，还是可以将其改变颜色的。所以指定的元素的优先级要比全部定义的高。相反没有指定定义的h1标题，就是绿色。

ID选择器

id选择器可以为标有id的HTML元素指定特定的样式，id选择器以“#”来定义。id选择常常用于简历派生选择器，他们经常一起来使用

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

        <!-- 调用CSS样式表 -->

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

    </head>

    <body>

            <div id="testid">

                呵呵呵呵

                <p>哈哈哈，我被指定定义了颜色，id与元素经常一起使用！</p>

            </div>

    </body>

</html>
/*id可以直接用#号来表示*/

#testid{

    color: green;

}

#testid p{

    color: red;

}

CSS类选择器

类选择器是以一个点“.”来显示的，class也可以结合派生选择器来一起使用，比如定义了一个元素<div class="testclass">

利用CSS可以如下修改：

/*class可以需要用“.”来表示*/

.testclass{

    color: green;

}

.testclass p{

    color: red;

}

属性选择器：

属性选择器就是针对标签中的属性来进行修改，当然，也可以根据属性的值，来针对性的修改：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8">

        <!-- 调用CSS样式表 -->

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

    </head>

    <body>

            <ol type="I">

                <li>属性选择器</li>

                <li>属性选择器</li>

                <li>属性选择器</li>

            </ol>

            <ol type="1">

                <li>属性选择器</li>

                <li>属性选择器</li>

                <li>属性选择器</li>

            </ol>

            <ol type="a">

                <li>属性选择器</li>

                <li>属性选择器</li>

                <li>属性选择器</li>

            </ol>

    </body>

</html>

然后用CSS来修改

/*如果没有值，通过属性修改全部的样式*/

[type]{

    color: red;

}

/*有值的话，就是针对值进行修改*/

[type="a"]{

    color: green;

}

总结：

主要学习了CSS的用法，已经派生选择器的使用，id选择器的使用，class选择器的使用和属性选择器的使用

id---以“#”开头

class---以“.”开头

属性选择器---以[]在括号类填写属性和值

派生选择器---直接调用标签，如：<p>{}

CSS基础介绍的更多相关文章

  1. Css基础-介绍及语法

    css 文件后缀.css 基础语法: selector { property:value } 例如: h1 {color:red;font-size:14px;} color:字体颜色  font-s ...

  2. 前端部分-CSS基础介绍

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.也就是定义相应的标签语言来定制显示样式达到一定的显示效果. 每个CSS样式由两个组成部分:选择器和 ...

  3. 百万年薪python之路 -- 前端CSS基础介绍

    一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...

  4. HTML&CSS基础-前端免费开发工具Hbuilder介绍

    HTML&CSS基础-前端免费开发工具Hbuilder介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 工欲善其事必先利其器,想要干好活得有一个好的工具. 一.文本编辑工 ...

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

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

  6. css基础总结一

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

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

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

  8. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  9. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

随机推荐

  1. C 到C++的升级

    C++所有的变量都可以在需要使用时再定义. C语言中的变量都必须在作用域开始的位置定义. register 关键字请求编译器将局部变量存储于寄存器中 在C语言无法获取register 变量的地址 在C ...

  2. support HTML5 in IE8

    <!--this code is used to support HTML5 in IE8--> <!--[if IE]><script type="text/ ...

  3. Mongo使用脚本更新数据

    SQL Server中我们经常要使用脚本来刷一些数据,在mongo中我们也可以使用mongo的脚本来刷mongo的数据 首先在命令窗口中链接到本地的mongo库 load("[脚本的地址]& ...

  4. 获取windows磁盘的可用空间函数

    <?php /* *获取某个磁盘的剩余空间 *$param 关联数组,下标是哪个盘,单位,可以是B,KB,MB,GB *可以设置获取多个磁盘,例如:array('C'=>'KB','D'= ...

  5. 20145320 《Java程序设计》第8周学习总结

    20145320 <Java程序设计>第8周学习总结 教材学习内容总结 15.1日志 java.util.logging包提供了日志功能相关类与接口,不必额外配置日志组件,就可以在标准ja ...

  6. 在Unity中如何取得一个Box的Bounds

    private BoxCollider mCollider; // Use this for initialization void Start () { mCollider = GetCompone ...

  7. windows平台（不包括ARM的CE）通用的压缩和解压缩

    通用是相对的,这里指的是xp和win7(其他版本我没测试过,不要用不要来找我) #define CMP_FRM COMPRESSION_FORMAT_LZNT1|COMPRESSION_ENGINE_ ...

  8. wex5 教程 之 图文讲解 考题模块框架设计

    前几天帮人设计了一个手机版(做了屏幕适配,电脑使用也正常)的考题框架,供学习交流使用,今天把设计思路与技巧命整理一下. 一 效果演示: 1 登陆后台 题库管理 试卷管理 考生管理 科目管理 2 考生注 ...

  9. html5 canvas 笔记五（合成与裁剪）

    组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...

  10. Maven单元测试报告及测试覆盖率

     对junit单元测试的报告:类似这样的结果 ------------------------------------------------------- T E S T S ----------- ...