CSS是层叠样式表,其作用在我看来就是统一一个或多个元素或者ID、class等的属性,CSS可以定义的属性非常多,一个好看的网页离不开CSS的修饰。

CSS简而言之就是三个部分:选择符、属性、属性值。

每个浏览器的CSS都在遵守标准的同时自主添加了各自的私有标准,为了更好的兼容性需要添加前缀:

-webkit  chrome和safari

-moz     firefox

-ms      IE

-o        opera

引入CSS的方法有三种:

1.行内引用

<a style="text-decoration:none;color:black"

*简单的页面编写或教学时常用

2.页内引用

<style type="text/css">
a{
text-decoration: none;color: black;
}
</style>

*页内引用放在头部有利于网页性能上的提高

3.外部引用

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

*具有一定规模的网站都使用外部引用,有利于网站的维护

**3种方式冲突时的优先级:行内引用>页内引用>外部引用(就近原则)

CSS注释格式:/*注释内容*/

-------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS选择符

1.通配选择符

选择所有元素,用于设置页面内所有元素的属性,如页面字体样式,字体颜色等

*{
font-family: "微软雅黑";
color: #bebebe;
}

2.元素选择符

直接选择指定元素进行属性设置,如对页面所有a元素解除下划线且颜色改为黑色:

a{
text-decoration: none;
color: black;
}

对页面所有p元素设置字体大小

p{font-size: 30px;}

3.群组选择符

需要给多个元素同时设置同一属性时使用,各元素之前用逗号分隔,如设置a和p元素字体大小为30像素:

a,p{font-size: 30px;}

设置h1,h2元素颜色为红色:

h1,h2{
color: red;
}

4.包含选择符

当不想选择页面全部的某个属性而只想选择被另外一个属性包含的部分时使用,可以选择元素包含的某一元素,格式为a b{} ab之间是用空格隔开

例如,div包含着两个p元素,而div外有也一个p元素

  <p>test</p>
<div>
<p>test</p>
<p>test</p>
</div>

当我们选择div里面的p元素时,将P元素字体设置为红色

div p{color:red}

预览效果会发现,第一个test为默认的黑色,只有后面两个test字体颜色变为红色

 

**

使用页内引用时,不要忘记把css代码放入<style></style>里面

使用外部引用时,css文件不需要任何html的标签,只需要选择符、属性和属性值,例 a{color:red}

CSS第一天总结的更多相关文章

  1. 妙味课堂——HTML+CSS(第一课)

    一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...

  2. web开发学习之旅---css第一天

    一.css全称 Cascade Style Sheet层叠样式表 二.css引入方式 行内样式:<h2 style="color:#0F0">Hello World&l ...

  3. [WEB面试题] web前端面试题HTML+CSS第一弹,个人整理部分面试题汇总

    以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...

  4. html+css第一篇

    行间样式表 <div style="--"></div> 内部样式表 <style>----</style> 外部样式表 <l ...

  5. 2、第2节课html教程客户端控件/css第一课/20150917

    1.<form> 标签 提交 <form action="http://www.baidu.com" method="post'> </fo ...

  6. [Codecademy] HTML&CSS 第一课:HTML Basic

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  7. [CSS]第一项和最后一项样式

    列表项的第一项距离顶部0.2rem,最后一项距离底部0.5rem .item:first-child { padding-top: .2rem; } .item:last-child { paddin ...

  8. 《HTML与CSS 第一章 认识HTML》读书笔记

    一.Web让广播明星黯然失色 要建立Web页面,需要创建用超文本标记语言(HyperText Markup Language,HTML)编写的文件,把它们放在一个Web服务器上 二.Web服务器能做什 ...

  9. css第一篇:元素选择器

    1:多个选择器 h1, h2 {}       ——h1或h2标签的所有元素 2:通配选择器 * {}     ——所有元素 3:元素选择器 div {}   ——所有div元素 4:类选择器 .te ...

随机推荐

  1. POJ 3281:Dining(最大流)

    http://poj.org/problem?id=3281 题意:有n头牛,f种食物,d种饮料,每头牛有fnum种喜欢的食物,dnum种喜欢的饮料,每种食物如果给一头牛吃了,那么另一个牛就不能吃这种 ...

  2. if 语句运用

    运用if语句完成对年.月.日的判断. Console.WriteLine("其输入年份:"); int a = int.Parse(Console.ReadLine()); Con ...

  3. 用jxl解析excel内容

    需要导入jxl.jar 下方表格为excel中内容: 序号 姓名 性别 生日 地址 1 测试1 男 1990-1-1 北京朝阳区 2 测试2 女 1998-2-2 北京海淀 3 测试3 男 1999- ...

  4. python学习笔记六 面向对象相关下(基础篇)

    面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以将多函数中公用的变量封装到对象中) 对象,根据模板创建的 ...

  5. flex垂直居中

    最近遇到一个令我绞尽脑汁的布局 T.T.T.T,分享下.重点--垂直居中. 布局说明:1. 场次为一场比赛 2. 比赛双方是交战的两个队伍 3. 一场比赛可以有多种玩法,所以场的每个玩法的布局的高度都 ...

  6. [问题2014S13] 解答

    [问题2014S13]  解答 (1) 先证必要性:若 \(A=LU\) 是 非异阵 \(A\) 的 \(LU\) 分解,则 \(L\) 是主对角元全部等于 1 的下三角阵,\(U\) 是主对角元全部 ...

  7. 文件上传和下载(可批量上传)——Spring(三)

    在文件上传和下载(可批量上传)——Spring(二)的基础上,发现了文件下载时,只有在Chrome浏览器下文件名正常显示,还有发布到服务器后,不能上传到指定的文件夹目录,如上传20160310.txt ...

  8. 20160824_CentOS6.4x64_关闭IPv6

    1.参考网址: http://blog.csdn.net/suplxj/article/details/7773423 2.我的操作: #cat <<EOF>>/etc/mod ...

  9. Android之源码之模块编译和调试

    Android之源码之模块编译调试 (一) 进行源码模块修改进行编译的调试 1.首先是从git或者svn上拉一套完整的工程下来,然后全编一下,一般这个时间比较长,大概会得2,3个小时左右, 2,编译成 ...

  10. [maven] 使用Nexus创建maven私有仓库

    1.为什么需要maven私有仓库? 从Maven中央仓库下载所需的jar包,需要外网的支持.如果公司不能上外网的话则不能从中央仓库下载所需jar包,公司网速慢的时候也会影响项目构建的速度.用户可以用n ...