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. 罪恶装备 Xrd REVELATOR 3D进化出的非照片真实视觉

    GUILTY GEAR Xrd REVELATOR 3D进化出的非照片真实视觉 罪恶装备系列是用2D日系动画一样的惊异视觉来吸引玩家的. 最新续品[GUILTY GEAR Xrd-REVELATOR- ...

  2. 友盟推送里面的Alias怎么用？可以理解成账号吗？

    友盟推送里面的Alias怎么用?可以理解成账号吗? 我们的App有自己的账号体系的,想在每次用户登陆的时候,给用户发一个欢迎消息. 看了一下友盟推送,里面有一个概念叫做Alias(别名),但是官方文档 ...

  3. JS中的_proto_(2)

    function God(){} function Foo(){ this.name="Foo~~"; } Foo.prototype = new God(); function ...

  4. 大商创开通用户和店铺 sql追踪

    添加用户(账号:wmy123 ,密码:wzd222,id:69)INSERT INTO `dsc1`.`dsc_users` (user_name,mobile_phone,email,passwor ...

  5. 基于docker＋etcd＋confd ＋ haproxy构建高可用、自发现的web服务

    基于docker+etcd+confd + haproxy构建高可用.自发现的web服务 2016-05-16 15:12 595人阅读 评论(0) 收藏 举报 版权声明:本文为博主原创文章,未经博主 ...

  6. jQuery源代码学习之六——jQuery数据缓存Data

    一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...

  7. javascript面向对象详解

    认识面向对象 1.面向对象中的概念 一切事物皆对象 对象具有封装和继承特性 信息隐藏 2.基本面向对象 3.函数构造器构造对象 深入了解面向对象 第一种书写格式 第二种书写格式

  8. google bookmarket api

    引用: 最近做了google书签同步的模块,发现google并没有公开bookmark相关的api接口,在网上也找了些资料,通过自己抓包分析,测试,总结下使用bookmark接口的心得,我是在andr ...

  9. Java enum(枚举)的用法详解（转）

    用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...

  10. Servlet-cookies机制

    通过cookies,可以保存用户的使用习惯,优化用户体验,同时能减轻服务端压力.下面说下在Servlet中cookies机制的使用 就用保存用户登录数据来举例子: 打开网页的处理Servlet: pa ...