CSS概述

  • CSS指层叠样式表
  • CSS样式表极大地提高了工作效率

CSS基础语法

selector {

    property:value

    }

例:hi {color:red; font-size:14px}

属性大于1个之后,属性之间用分号隔开

如果值大于1个单词,则需要加上引号:

  p{font-family: "sans serif";}

CSS高级语法

1、选择器分组:

h1,h2,h3,h4,h5,h6{color:red;},每个标题都加上了color样式

2、继承:

body{

    color:green;

   }

body中每个自身没有单独定义样式的属性都会被加上color样式,而自身有单独定义样式的不变。

CSS派生选择器

通过依据元素在其位置的上下文关系来定义样式

<body>
<p><strong>hello world</strong></p>
<ul>
<li><strong>hello world</strong></li>
</ul> </body>

创建一个css文件,在css中定义样式,在html中引入css。

li strong{
color: red;
}
strong{
color: blueviolet;
}

<li>中hello world颜色为blueviolet,<p>中的变为red,如图:

CSSid选择器

1、选择器

  • id选择器可以为标有id的HTML元素指定特定的样式
  • id选择器以“#”来定义

2、id选择器和派生选择器:

目前比较常用的方式是id选择器常常用于建立派生选择器。

<body>
<p id="pid">hello css<a href="http://www.baidu.com">百度一下</a></p>
<div id="divid">
这是一个divid
<p>第二个div</p>
</div>
</body>

再引入一个css文件

#pid a{
color: cadetblue;
}
#divid p{
color: red;
}

运行之后的结果如图“

CSS类选择器

  • 类选择器

    类选择器以一个点显示

  • class也可以用作派生选择器
<body>
<p class="pclass">class效果<a href="http://www.baidu.com">百度一下</a></p>
<div class="divclass">
hello div
<p>这是一个p标签</p>
</div>
</body>

再引入一个css文件

.pclass a{
color: chartreuse;
}
.divclass p{
color: green;;
}

运行结果如图:

CSS属性选择器

  • 属性选择器

    对带有指定属性的HTML元素设置样式

  • 属性和值选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
[title]{
color:blue;
}
[title=tt]{
color:red;
}
</style>
</head>
<body>
<p title="t">属性选择器</p>
<p title="tt">属性与值选择器</p>
</body>

运行结果:

本站文章为宝宝巴士 SD.Team原创,转载务必在明显处注明:(作者官方网站:宝宝巴士)

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4805770.html

html5学习之路_007的更多相关文章

  1. HTML5学习之路

    出于公司项目需求,我现在开始学习html5,虽然零零散散有过一点,比如说新出的语义化标签,本地存储之类的,但是从来都没有系统的去了解.

  2. html5学习之路_001

    安装环境 安装intellij idea作为开发环境 打开环境 新建一个html文件,打开之后出现代码框架,再次基础上继续编码即可,例如: <!DOCTYPE html> <html ...

  3. html5学习之路_006

    表单与php交互 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. html5学习之路_005

    PHP环境搭建 1.下载安装xampp 2.打开xampp,开启mysql和apache 3.在开发环境eclips中下载插件 4.安装php 5.切换到php开发环境 6.创建一个php项目 7.打 ...

  5. html5学习之路_004

    HTML表单 表单用于获取不同类型的用户输入 常用表单标签 下面为一个简单的表单: <!DOCTYPE html> <html> <head lang="en& ...

  6. html5学习之路_003

    html布局 使用<div>元素布局 使用<table>元素布局 <div>元素布局 <!DOCTYPE html> <html> < ...

  7. html5学习之路_002

    html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...

  8. 8年,从2D到3D,我的学习之路

    Mickey 写了一篇 <一个本科毕业生创业两年的感悟>,从他的视角,总结了我们合作的两年经历. 我也来写一篇,介绍我的学习之路,希望对大家有所帮助,谢谢大家- 我的学习方法 1.直接从0 ...

  9. springboot 学习之路 8 (整合websocket(1))

    目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...

随机推荐

  1. select函数的使用

    select函数是 I/O 复用中非常重要的一个函数,属于并发编程的.它能够监视我们需要监视的文件描述符的变化情况–读.写或者异常 1. 函数原型 #include <sys/select.h& ...

  2. tomcat8调优

    a. tomcat的运行原理: 1. Tomcat是运行在JVM中的一个进程.它定义为[中间件],顾名思义,是一个在Java项目与JVM之间的中间容器. 2. Web项目的本质,是一大堆的资源文件和方 ...

  3. OSG程序设计之osg::NodeVisitor

    本文所有内容来自<OpenSceneGraph三维渲染引擎设计与实践>一书. 本文主要讨论的是OSG中节点的访问. 对于节点的访问是从节点接收一个访问器开始的,用户执行某个节点的accep ...

  4. G - Queue HDU - 5493 线段树+二分

    G - Queue HDU - 5493 题目大意:给你n个人的身高和这个人前面或者后面有多少个比他高的人,让你还原这个序列,按字典序输出. 题解: 首先按高度排序. 设每个人在其前面有k个人,设比这 ...

  5. 线段树 G - Mayor's posters 小技巧

    G - Mayor's posters POJ - 2528 这个题目要倒着来写,从后面往前面贴,因为前面的有些会被后面的覆盖. 所以我们就判断这张海报的位置有没有完全被覆盖,如果完全被覆盖了就不能贴 ...

  6. 201771010113 李婷华 《面向对象程序设计(java)》第七周学习总结

    一.理论知识学习部分 1.动态绑定:又称为运行时绑定.程序在运行时会自动选择调用哪个方法. 2.静态绑定:如果方法是private.static.final修饰的,或者是构造器,那么编译器能准确地判断 ...

  7. Day_08【面向对象】扩展案例4_年龄为30岁的老王养了一只黑颜色的2岁的宠物……

    #分析以下需求,并用代码实现: 1.定义动物类 属性: 年龄,颜色 行为: eat(String something)方法(无具体行为,不同动物吃的方式和东西不一样,something表示吃的东西) ...

  8. docker-compose安装rabbitmq集群(主从集群---》镜像集群)

    docker-compose安装rabbitmq集群(主从集群--->镜像集群) yls 2020/5/11 创建docker-compose.yml 文件 version: '3' servi ...

  9. Web的Cookies,Session,Application

    Cookies:客户端(浏览器)存储信息的地方 Session:服务器的内置对象,可以在这里存储信息.按用户区分,每个客户端有一个特定的SessionID.存储时间按分钟计. Application: ...

  10. [hdu1847]博弈,推理

    题意:一堆石子,有n个,两个人轮流取,每次都只能取2的幂次方个数,不能取的人输 思路:首先0是必败态,2的所有幂次都是必胜态.由于选的数模3只能是1或2,恰好又都是2的幂次,0,.3都为必败态,猜想3 ...