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. JS去掉数组的重复项

    自己知道思路怎么去,但是就是自己不会写,在网上找了一些来看,有些还是没有怎么看明白.学习到了这么一种方法 var a=['ss','dd','ss','cc','dd',1,2,1] var b={} ...

  2. js广告弹窗

    生活中我们经常遇到一些烦人的广告页面,比方说弹窗,悬浮等等各种广告.有的同事甚至都下一个屏蔽广告插件到浏览器上.这样就防止了广告的干扰. 但是我们学前端的必须是要知道广告弹窗这个做的过程,甚至是它的原 ...

  3. noi 2989 糖果

    题目链接:http://noi.openjudge.cn/ch0206/2989/ 首先,数据很大,直接用背包会re. 这里增加的是对%k 的余数维度.f[i][j] 表示前 i 种糖果取到总颗数模 ...

  4. mac攻略(五) -- 使用brew配置php7开发环境(mac+php+apache+mysql+redis)

    前面介绍过基本的配置,后来我又从网上查找了很多资料,经过不断的摸索,下面做了一个总结,希望能对大家提供些许帮助(Mac版本是sierra)   一.mac系统会自带git,而我们要做的是自己安装git ...

  5. faster alter table add column

    Create a new table (using the structure of the current table) with the new column(s) included. execu ...

  6. psd切图

    打开UI设计师给你的PSD文件,我们以下图为例,截产品超市前面的购物车 1.按v选择移动工具,然后在上面的选项栏中勾选自动选择,在再右边选择图层 2.这时候用鼠标选中产品超市前面的购物车,就能在右边的 ...

  7. suds调用webservice

    一.安装 pip install suds 二.日志 import logging logging.basicConfig(level=logging.INFO) logging.getLogger( ...

  8. Maven3简介

    Maven3简介 百度百科 maven官网: http:\/\/maven.apache.org\/ Maven下载安装 Maven 下载:http:\/\/maven.apache.org\/dow ...

  9. Nosql modifing...

    关键字补充(不晓得的自己去Google): 负载均衡  \文件上传到服务器\建表建动态列簇\数据仓库的应用\事务的提交和回滚\SQL执行计划\联机事务处理\联机分析处理\多表关联查询\数据存储引擎 N ...

  10. Spring IoC原理详解

    去掌握一门技术的时候,往往很多人都忽略了一点,只是一味地去写代码,原理层面的东西从来就不理会 还有就是学习的过程中,不去想为什么有了当前的写法,却有着这么一门技术可以代替它 一般来说,在写程序的时候, ...