CSS 入门
以下内容均来自 慕课网
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
CSS 代码语法
css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔。
从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。
内联式
css样式表就是把css代码直接写在现有的HTML标签中。
嵌入式 css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。
外部式 css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css
”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内, eg : <link href="style.css" rel="stylesheet" type="text/css" />
优先级:内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。即 <link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)
。
什么是选择器?
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
标签选择器:标签选择器其实就是html代码中的标签。 p{font-size:12px;line-height:1.6em;}
ID选择器: #setGreen{ color:green; } // 用 (#)
类和ID选择器的区别 相同点:可以应用于任何元素;不同点:1、ID选择器只能在文档中使用一次。2、可以使用类选择器词列表方法为一个元素同时设置多个样式。
子选择器:即大于符号(>),用于选择指定标签元素的第一代子元素。 .food>li{border:1px solid red;}
包含(后代)选择器:包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。 .first span{color:red;}
子选择器和包含选择器区别:>作用于元素的第一代后代,空格作用于元素的所有后代。
通用选择器:使用一个(*)号指定,它的作用是匹配html中所有标签元素。 * {color:red;}
伪类选择器:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色, a:hover{color:red;}
关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。
分类选择符:当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色: h1,span{color:red;}
CSS 入门的更多相关文章
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]
CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- 第六十九节,css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 胖虎都看得懂的CSS入门
CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
- HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版
HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
- H5教程(二),CSS入门(一)选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
随机推荐
- GBK编码和UTF-8编码互转的大坑
这几天遇到一个BUG,问题很简单,解决却花了3.4天,特意记录下来. linux环境下,将默认编码设置为GBK以后,运行GBK编码的脚本,调用一个Java的jar包,然后总jar包中返回GBK字符串. ...
- Struts2与jQuery.ajax()的结合
1.客户端是通过$.ajax()方法向login.action传递数据:2.其中action中execute()方法返回值为空,并通过[ServletActionContext.getResponse ...
- 国内使用google地图的初级使用
<!DOCTYPE html><html><head><title>Simple Map</title><meta name=&quo ...
- vmware-tools(vmware workstation 10.0.4)安装的时候遇到的bug
有个GitHub,专门解决C++编译的时候出的问题 地址
- maven部署命令
参考文档:http://blog.csdn.net/woshixuye/article/details/8133050 http://www.blogjava.net/itvincent/archiv ...
- linux的make install命令
tar zxvf redis-2.8.15.tar.gz cd redis-2.8.15/ make make test make install
- Linux中 pid_t 类型的定义.
说明:涉及到的头文件(.h),目录默认都是基于 /usr/include/ 目录. 1.在 "/sys/types.h"中,有下列内容: #include <bits/typ ...
- cognos开发与部署报表到广西数据质量平台
1.cognos报表的部署. 参数制作的步骤: 1.先在cognos里面把做好的报表路径拷贝,然后再拷贝陈工给的报表路径. 开始做替换,把陈工给的报表路径头拿到做好的报表路径中,如下面的链接http: ...
- 【转】深入理解Java内存模型(二)——重排序
数据依赖性 如果两个操作访问同一个变量,且这两个操作中有一个为写操作,此时这两个操作之间就存在数据依赖性.数据依赖分下列三种类型: 名称 代码示例 说明 写后读 a = 1;b = a; 写一个变量之 ...
- [java] Java NIO 学习笔记 I
如今在运行时优化方面,JVM 已然前进了一大步.现在 JVM 运行字节码的速率已经接近本地 编译代码,借助动态运行时优化,其表现甚至还有所超越.这就意味着,多数 Java 应用程序已不 再受 CPU ...