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. UFS

    ● UFS vs eMMC 1. UFS有分离的读写通道,可以同时进行读写操作(双向),但是eMMC在同一时刻只能读或写. 2. UFS有一个命令队列,将命令进行排序.因此,多个命令可以同时处理,从而 ...

  2. GDC2016 [全境封锁]，11个种类5个派系的敌人设计思路

    [汤姆克兰西:全境封锁],11个种类5个派系的敌人设计思路 实现[汤姆克兰西]射击RPG的AI开发   日文链接:http://game.watch.impress.co.jp/docs/news/2 ...

  3. C#常用命名空间

    MSDN上的C#.NET Framework类库文档目录树,本人觉得有点不得要领,于是参考搜到的结果简单整理如下: 一.基础命名空间 System 处理内建数据.数学计算.随机数的产生.环境变量.垃圾 ...

  4. 滚动固定TAB在顶部显示

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. Box2D淌坑日记： 关节(Joint)和旋转关节(b2RevoluteJoint)

    关节在Box2D的对象组织结构中,与b2Body(刚体)并列.因此两种对象都是由b2World创建并直接管理. 然而Joint有依赖于b2Body的地方,就是它的销毁:当关节所涉及到的刚体被销毁,关节 ...

  6. Day3~Day7(2016/1/23~2016/1/27)

    活动的生命周期:onCreate();onStart();onResume();onPause();onStop();onDestroy();onRestart(); 活动的启动模式:standard ...

  7. LinkedBlockingQueue的put,add跟offer的区别

    LinkedBlockingQueue的put,add和offer的区别 最近在学习<<Java并发编程实践>>,有很多java.util.concurrent包下的新类.Li ...

  8. JS 的trim()

    去除字符串左右两端的空格,在vbscript里 可  用 trim.ltrim 或 rtrim,但 js 却没有这 3个 内置方法,需 手工编写.下面的实现方法  用到 正则表达式,效率不错, 把 三 ...

  9. LightOj 1236 - Pairs Forming LCM (分解素因子，LCM )

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1236 题意:给你一个数n,求有多少对(i,  j)满足 LCM(i, j) = n, ...

  10. webstorm 代码自动换行

    代码自动换行 菜单File→Settings→Editor→General