MOOC Web前端笔记（三）：CSS样式
CSS样式
CSS概述
CSS--Cascading Style Shees层叠样式表
HTML定义网页的内容，CSS定义内容的样式。
内容和样式相互分离，便于修改样式。
CSS语法
p{
font-size:12px;/*字号*/
color:bule; /*文字颜色*/
font-weight:bold; /*加粗*/
}
注意：1.最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2.为了使用样式更加容易阅读，可以将每条代码写在一个新行内。
CSS添加方法
CSS添加方法--行内
直接把属性放在标签内部。
<p style="color:red;">
CSS添加方法--内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<p>此时我是红色的</p>
</body>
</html>
注意：即使有公共CSS代码，也是每个页面都要定义的。
适合文件很少，CSS代码也不多的情况。
如果一个网站有很多页面，每个文件都会变大，后期维护难度也大。
CSS添加方法--单独文件
外部式样式表文件style.css
p{
color:red;
}
网页文件：1.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>此时我是红色的</p>
</body>
</html>
subtime扩展方法：link:csss
单独文件优点：
页面结构HTML代码与样式CSS代码完全分离
维护方便
如果需要改变网站风格，只需要修改公共CSS文件。
可以在同一个HTML文档中引用多个外部样式表。
CSS添加方法--优先级
多重样式可以层叠，可以覆盖。
样式的优先级按照“就近原则”。
行内样式>内嵌样式>链接样式>浏览器默认样式。
CSS选择器
CSS选择器类型：
标签选择器
以标签为名字，如：
CSS:
<style type="text/css">
body{
background:center;
font-size:12px;
}
h1{font:"黑体";font-size:20px;}
p{color:red;font-size:16px;}
hr{width:200px}
</style>
HTML：
<body>
<h1>标题</h1>
<hr>
<p>正文的段落</p>
</body>
类别选择器
以类别为名字
如：
CSS：
<style type="text/css">
p{font-size:12px;}
.one{font:"黑体";font-size:20px;}
.two{color:red;font-size:16px;}
</style>
HTML：
<body>
<p class="one">类别1</p>
<p class="two">类别2</p>
<p>正文的段落</p>
</body>
ID选择器
以ID为名字：
如：
CSS：
<style type="text/css">
#one{font-size:12px;}
#two{font:"黑体";font-size:20px;}
</style>
HTML：
<body>
<p id="one">类别1</p>
<p id="two">类别2</p>
</body>
ID与class 的区别：一个ID在当前文件中只可以被引用一次。
嵌套声明
span标签的嵌套声明：
CSS：
<style type="text/css">
p span{font-size:12px;}
</style>
HTML：
<body>
<p><span>正文的段落<span></p>
</body>
集体声明
选择器用，隔开可以声明进行集体声明
CSS：
<style type="text/css">
h1,p{font-size:12px;}
</style>
HTML：
<body>
<h1>标题</h1>
<p>正文的段落</p>
</body>
全局声明
用*代表全局声明
CSS：
<style type="text/css">
*{text-align:center;}
</style>
HTML：
<body>
<h1>欢迎</h1>
<p>正文的段落</p>
</body>
混合
多个class选择器混用，用空格分开
<div class="one yellow left">oneyellowleft</div>
id和class混用
<div id="my" class="one yellow left">myoneyellowleft
id选择器不可以多个同时使用
CSS样式(1)文字样式
CSS样式的常用单位
1.px：像素
2.em：1em-一个字符，2em-2个字符，自动适应用户所使用的字体。
3.%：百分比
百分比的相对值遵循DOM树的继承：
颜色
1.直接用颜色名字，如：red、blue、green 详见W3Cschool
2.rgb(x,x,x) RGB值，每个颜色分量取值0-255，如红色rgb(255,0,0).
3.rgb(x%,x%,x%) RGB百分比值，如：红色rgb(100%,0%,0%)
4.rgba(x,x,x,x) RGB值，透明度 a值：0.0(完全透明)与1.0(完全不透明)，如，红色半透明rgba(255,0,0,0.5,)
5#rrggbb 十六进制数，如红色：#ff0000或#f00(去掉重复位)
文本可设置样式
1.color 文本颜色 如：red #f00 rgb(255,0,0)
2.letter-spacing 字符间距 2px -3px 1em (如果像素为负数，则字符重叠)
3.line-height 行高 14px 1.5em 120% （em相对于字号大小，我们一般利用行高进行垂直居中，把行高设为与元素高度相等，即可做到垂直居中）
4.text-align 对齐 center left right justify(两端对齐)
5.text-decoration 装饰线 none(一般用来去掉默认超链接的下划线) overline(上面有线) underline(下面有线) line-through(中间有线，删除线)
6.text-indent 首行缩进 2em
字体可设置样式
1.font 在一个声明中设置所有的字体属性 如：font:bold 18px '幼圆'
2.font-family 字体系列 如：font-family:"HiraginoSans GB","Micrsoft YaHei"（设置多个字体，第一个没有就用第二个，以此类推，如果字体名字中有空格，需要加引号，否则可以不加）
3.font-size 字号 如：14px 5pt(榜值) 120%
4.font-style 斜体 如：italic
5.font-weight 粗体 如：bold
当使用font一次性声明字体样式时有一定的顺序
font:斜体 粗体 字号/行高 字体
如：font:italic bold 16px/1.5em '宋体'；
CSS样式(2)背景与超链接
背景可设置样式
1.background-color:见上一节(注意：对于背景颜色和图片，如果标签内元素为空，需要先指定其标签的长宽才能显示出颜色或者图片)
2.background-image:url("logo.jpg")（背景图片会覆盖背景颜色）
3.background-repeat(表示背景图片的填充方式): repeat(双向填充),repeat-x(横向填充),repeat-y(纵向填充),no-repeat(只显示一次)
4.background:颜色 图片 repeat
链接的四种状态
1.a:link - 普通的、未被访问的链接
2.a:visited - 用户已访问的链接
3.a:hover - 鼠标指针位于链接的上方悬停(必须位于a:link和a:visited之后)
4.a:active - 链接被点击的时刻(必须位于a:hover 之后)
我们把这类选择器名称为：伪类选择器。
CSS样式(3)列表、表格样式
列表可设置样式
list-style 所有用于列表的属性，设置于一个声明中。
list-style-image 为列表项标志设置图像 详见上一节背景图片。
list-style-position 标志的位置 inside,outside（一个在里面，一个在外面）。
list-style-type 标志类型：太多了，看图吧。
表格可设置样式
width,height 属性：宽、高。
border 属性：边框宽度，（在后面盒子模型中和详细说，这里简单说）。
border-collpase：表格合并
nth-child(odd|even)：奇偶选择器
一般用来设置表格隔行颜色不一样，方便用户浏览。如下图：
例如：tr:nth-child(odd|even)（注意括号里可以带数字，直接说明是第几个元组，亦可以用odd和even说明奇偶性）
{
background-color:#EAF2D3;
}
注意：奇偶是从第一行表头开始数的。
MOOC Web前端笔记（三）：CSS样式的更多相关文章
- Web前端新人之CSS样式选择器
最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...
- web前端笔记整理---CSS
一 Css 文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...
- web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- 构建高性能WEB站点笔记三
构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
随机推荐
- Beyond Compare 4解除日期限制，激活版本
修改注册表 1 在搜索栏中输入 regedit ,打开注册表 2 删除项目:计算机\HKEY_CURRENT_USER\Software\Scooter Software\Beyond Compare ...
- Linux shell 中断循环语句
无限循环: 循环有限的生命,他们跳出来,一旦条件是 false 还是 false 取决于循环. 由于所需的条件是不符合一个循环可能永远持续下去.永远不会终止执行一个循环执行无限次数.出于这个原因,这样 ...
- windows定期删除文件
:: 定时清理客户端上传导入包文件 @echo off title 清理客户端上传导入包文件 :: 导入包文件目录 set log_dir="F:\http\uploadzip\web\ht ...
- VScode插件：Todo Tree
Todo Tree 用于记录很多需要做但是暂时没办法立即做的事情,如修改样式,日期格式处理等 用法: // TODO: 流程图用canvas重构 然后,你在代码中写的TODO,会被识别出来,点击即可查 ...
- LeetCode 896. Monotonic Array
原题链接在这里:https://leetcode.com/problems/monotonic-array/ 题目: An array is monotonic if it is either mon ...
- zzulioj - 2624: 小H的奇怪加法
题目链接:http://acm.zzuli.edu.cn/problem.php?id=2624 题目描述 小H非常喜欢研究算法,尤其是各种加法.没错加法包含很多种,例如二进制中的全加,半加等.全加: ...
- Pandas | 26 疏离数据
当任何匹配特定值的数据(NaN/缺失值,尽管可以选择任何值)被省略时,稀疏对象被“压缩”. 一个特殊的SparseIndex对象跟踪数据被“稀疏”的地方. 这将在一个例子中更有意义. 所有的标准Pan ...
- 余弦相似度-Cosine Similar（转载）
余弦相似度用向量空间中两个向量夹角的余弦值作为衡量两个个体间差异的大小.相比距离度量,余弦相似度更加注重两个向量在方向上的差异,而非距离或长度上. 与欧几里德距离类似,基于余弦相似度的计算方法也是把用 ...
- IIS启动后不在桌面显示
1.问题 周末一过,准备投入到紧张激烈的工作之中.不曾想IIS打开后不在桌面显示了,任务栏有打开的图标,配置的网站可以正常打开.尝试重装无果. 2.解决 Win+R,在运行中输入inetmgr.exe ...
- 一些树上dp的复杂度证明
以下均为内网 树上染色 https://www.lydsy.com/JudgeOnline/problem.php?id=4033 可怜与超市 http://hzoj.com/contest/62/p ...