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. java中对插入排序的理解以及实例

    一.基本思想 通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应的位置并插入. 插入排序非常类似于整扑克牌. 在开始摸牌时,左手是空的,牌面朝下放在桌上.接着,一次从桌上摸起一张牌 ...

  2. miniUI datagrid 获取序号

    获取每一个row以后,其中的row._index字段和页面上显示的序号虽然看起来一样, 但是实际上不是同一个东西,如果用客户端排序模式,排序后,row._index和页面显示的序号就对不上了. 正确的 ...

  3. Prime Query (ZOJ 3911 线段树)

    Prime Query Time Limit: 1 Second Memory Limit: 196608 KB You are given a simple task. Given a sequen ...

  4. Mac OS下pip安装 pillow

    sudo pip install pil报错如下:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Develo ...

  5. linux服务器默认连接数配置

    vi /etc/security/limits.d/90-nproc.conf * - nofile 65536* - nproc 65536root soft nproc unlimited vi ...

  6. [问题2014A05] 复旦高等代数 I(14级)每周一题(第七教学周)

    [问题2014A05]  (1) 设 \(x_1,x_2\cdots,x_n,x\) 都是未定元, \(s_k=x_1^k+x_2^k+\cdots+x_n^k\,(k\geq 1)\), \(s_0 ...

  7. jQuery判断当前元素是第几个元素

    $("ul li").click(function () { var index = $("ul li").index(this); alert(index); ...

  8. IE/Firefox/Chrome等浏览器保存Cookie的位置

    IE/Firefox/Chrome等浏览器保存Cookie的位置 原文  http://smilejay.com/2013/04/browser-cookie-location/   前面写了篇长文( ...

  9. 滚动RollUp、压缩

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. SQL Server 2012 管理新特性:AlwaysOn【转】

    http://jimshu.blog.51cto.com/3171847/871169 见超链接