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. laravel框架总结(五) -- 服务提供者(提及契约Contracts)

    首先理解两个概念 1.契约:一组定义了框架核心服务的接口 2.服务提供者:所有 Laravel 应用程序启动的中心所在. 包括你自己的应用程序,以及所有的 Laravel 核心服务,都是通过服务提供者 ...

  2. CentOS 7数据库mysql和mariadb手动安装冲突的问题解决

    由于确定使用mysql,那只有卸载mariadb了. 一.首先查看当前安装的mariadb包 rpm -qa|grep mariadb 本人得到结果是:mariadb-libs-5.5.44-2.el ...

  3. PHP中的闭包和匿名函数

    闭包的概念是指在创建闭包时,闭包会封装周围的状态的函数.即便闭包所在环境不在了.但闭包中封装的状态依然存在. 匿名函数就是没有名称的函数. 它们看似很函数一样,实际上它们属于Closure类的实例 P ...

  4. file_get_contents微信头像等待时间过长的原因

    UPDATE 2016/05/13 stackoverflow上的解决方法:http://stackoverflow.com/questions/3629504/php-file-get-conten ...

  5. mongodb中的副本集搭建实践

    准备运行1个主节点,2个从节点,从节点中其中是一个是仲裁节点(Arb). --oplogSize --oplogSize --oplogSize 其中application是副本集的名称,节点必须相同 ...

  6. shell学习笔记1

    知识点1.修改输出的颜色 echo -e "\e[1;31m This is red text \e[0m" 其中,\e[1;31m 表示将输出显示为红色: \e[0m 标识将颜色 ...

  7. os.environ()

    ---------2016-5-9 18:56:39-- source:OS.ENVIRON()详解

  8. java complier compliance level问题引发的思考

    http://blog.csdn.net/shan9liang/article/details/17266519 ******************************************* ...

  9. json化 datatable

    /// <summary> /// 将DataSet中数据,json化 /// </summary> /// <param name="source" ...

  10. JQuery text()、html() 以及 val()

    获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元 ...