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. Codeforces Round #367 (Div. 2) D. Vasiliy's Multiset（可持久化Trie）

    D. Vasiliy's Multiset time limit per test 4 seconds memory limit per test 256 megabytes input standa ...

  2. 基于 ThinkPHP 3.2.3 的页面静态化功能的实现

    PHP 的页面静态化有多种实现方式,比如使用输出缓冲(output buffering),该种方式是把数据缓存在 PHP 的缓冲区(内存)中,下一次取数据时直接从缓冲区中读取数据,从而避免了脚本的编译 ...

  3. UIView 的autoresizingMask属性

    autoresizingMask属性的意思就是自动调整子控件与父控件中间的位置,宽高,定义如下: typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) ...

  4. 当div自适应的高度超过预设的高度的时候出现滚动条的办法

    方法一:主要是 min-height:50px; max-height:200px;overflow: auto; <div id="ss" style="widt ...

  5. Assets和Raw区别

    在建立项目中一般会默认建立assets文件,当然我们还可以在res文件下面建立raw文件夹,这里面都可以存放一些多媒体文件或者文本信息,可以供我们在程序中使用. assets下面的文件不会被编译,通过 ...

  6. JavasSript实现秒转换为“天时分秒”控件和TDD测试方法应用

    背景 时间累计值,在顶层一般以秒为计算单位, 所以到页面上如果直接显示xx秒, 如果秒的值很大, 则用户得不到直观的感受, 到底有多长时间, 在日长生活中, 人们以天 时 分 秒为单位来记录时间累计值 ...

  7. react js 按条数 展开／折叠

    //2条const MAX_SHOW_NUM = 2; class HotDiscuss extends Component { static propTypes = { //验证 repliedCo ...

  8. CPlus播放多媒体之播放声音

    1.头文件需要<mmsystem.h>,但是之前需要包含<windows.h> 2.预处理#pragma comment<lib,"winmm.h"& ...

  9. 获取乌云补天指定关键字的漏洞并输出URL和标题

    #coding=utf-8 import urllib2 import re import time def timestamp():         return str(time.strftime ...

  10. bzoj2729 [HNOI2012]排队

    组合数学,推一下式子,并不难推. java代码 import java.io.*; import java.math.BigInteger; import java.util.*; public cl ...