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样式的更多相关文章

  1. Web前端新人之CSS样式选择器

    最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...

  2. web前端笔记整理---CSS

    一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...

  3. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  4. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  5. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  6. 1+x证书Web前端开发HTML+CSS专项练习测试题（八）

    1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...

  7. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  8. 构建高性能WEB站点笔记三

    构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...

  9. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

随机推荐

  1. Spring之IoC详解(非原创）

    文章大纲 一.Spring介绍二.Spring的IoC实战三.IoC常见注解总结四.项目源码及参考资料下载五.参考文章 一.Spring介绍 1. 什么是Spring   Spring是分层的Java ...

  2. MySQL数据物理备份之tar打包备份

    复制数据文件方式,可以使用cp或tar 1.停止服务 [root@localhost mysql]# systemctl stop mysqld [root@localhost mysql]# net ...

  3. 解决大于5.7版本mysql的分组报错Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'userinfo.

    前言: 借鉴网址:https://blog.csdn.net/fansili/article/details/78664267 原因:  MySQL 5.7.5和up实现了对功能依赖的检测.如果启用了 ...

  4. Resin开放远程调试端口

    Resin开放远程调试端口在启动加载的resin.xml中,找到  <server-default>, 在其下加入 <jvm-arg>-Xdebug</jvm-arg&g ...

  5. django 使用新的虚拟环境

    在原来环境中,项目根目录下,执行命令收集所有包 pip freeze > plist.txt 首先下载一个新虚拟环境,并且创建一个新的虚拟环境 sudo apt-get install pyth ...

  6. 大数据技术原理与应用：【第二讲】大数据处理架构Hadoop

    2.1 Hadoop概论 创始人:Doug Cutting 1.简介: 开源免费; 操作简单,极大降低使用的复杂性; Hadoop是Java开发的; 在Hadoop上开发应用支持多种编程语言.不限于J ...

  7. 第06节-开源蓝牙协议BTStack框架分析

    本篇博客根据韦东山的视频,整理所得. 本篇博客讲解BTStack的框架,首先来看一下硬件的结构: 蓝牙模块接在电脑上,或是接在开发板上.不论接在哪,我们都需要编写程序来控制这个蓝牙模块. . 我们需要 ...

  8. 201871020225-牟星源《面向对象程序设计（JAVA）》第二周学习总结

    正文: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-dai ...

  9. OpenCV 学习笔记（15）openc解帧视频

    1 修改读取视频的地址 2 修改保存图片序列的路径 String videopath = "F:/dongdong/0tool/3D/2模型/相机阵列/1_12cam亿级相机/数据/giga ...

  10. 自用ftp上传脚本

    #!/bin/sh backupserver=$1 #localdir=ftp_result_tmp username=$3 password=$4 #remodir='./Log/2018-01-2 ...