CSS简介及基本知识
(CSS)cascading style sheets:层叠样式表。级联式样式表，简称：样式表。
Sheets :就是一个样式文件，它的扩展名为.css
Style:外观，个性化
样式表的位置
为了学习方便，先用内嵌式样式(内部样式表)
位置：<head></head>之间。
标记：<style type=”text/css” >样式写在这里</style>
CSS语法格式
声明方法
选择器{属性1：值1;属性2：值2;属性n：值n;}
什么是选择器？
就是通过名称指定对哪些标签进行样式设置
CSS注释
HTML注释：<!--注释内容-->
CSS注释：/*注释内容*/，不管是单行还是多行只有这一种方法。
CSS基本选择器：
基本选择器：
style属性(行内样式)
直接写在标签内
如：<p style=”font-size:12px; color:red;” >文字内容</p>
标签
针对HTML的标签直接设置样式。
ID
语法：
以“#”开头，
命名方法：建议全小写，以字母开头
使用方法：<p id=”id的名称”></p>
类
语法：
定义的方法：用“.”开头,后跟类名。
类名书写规范，以小写字母开始。
使用方法：
<p class=“类名”>内容</p>
通配符选择器
*{CSS规则}
意思：针对当前页面所用的标签应用同样的样式（对标签的初始化）
如：*{margin:0;padding:0;border:0;}
专家建议对标签初始化时采用下面的方法
body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}
标签和类结合
如：p.test{color:red}
针对p标签应用类名为test1的样式。
组合选择器
多元素选择器
多个标签或选择器同时声明
如：h1,h2,ul,li{margin:0;padding:0;}
定义的方法注意思：
选择器之间用逗号隔开。
后代选择器
p空格span{color:red;}
含义：针对p标签中的span标签定义样式。
注意：选择器之间用空格隔开。
子元素选择器
定义的方法
P>span {CSS规则}
只针会p标签中的span一级有效。
伪类选择器
链接<a href=”#”></a>
a:link 链接的正常状态
a:visited 鼠标单击过的链接状态
a:hover 鼠标放在链接上面的（悬停）状态
a:active 当前正在访问的链接状态
当有多种链接样式时，通常配合类来设置
CSS尺寸属性
px,em ,%（相对单位）
font-size:25不加单位的数字毫无意思
px像素，相对单位。和屏幕的分辨率有关。
em：一个字体高（1倍字体高）,2em(当前默认字体的2倍)
%,百分比。相对单位。相对于当前默认值的百分比。
浏览器的默认字体大小为16px.
CSS字体属性
font-family: 设置字体,建议英文的中文字体，黑体=>simhei
如：Font-family:simhei;
font-size: 设置字体的大小单位，(注意：一定加上单位)
如：font-size:24px;
font-weight:设置字体的加粗方式，100－900，bold,normal(取消加粗)
如：font-weight:100; font-weight:bold; font-weight:normal;
font-style：设置字体样式，italic
Font-style:italic; 设置字体为斜体。
CSS文本属性
color ：设置文本的颜色 用单词或16进制（建议#RRGGBB）
可以简写：如：#669900; 也可成：#690;
text-align
文本的对齐方式
left ,center right
line-height 行高
垂直方向居中，所在容器，所在元素的高度与line-height保持一致。
text-indent 文本的缩进
letter-spacing 字间距
text-decoration
文本的描述，修饰
underline,overline,line-through,none;
CSS列表属性
List-style:none;
List-style-type:none;
列表项前面的项目符号去掉。
ul,li{List-style-type:none;}
CSS细线表格
<table rules=”all”>
<table bgcolor=”” cellspacing=”2” >
<td bgcolor=”white” >
<table style=”border-collapse:collapse”
CSS边框属性table,td
CSS边框属性
border:线宽像素 线型 红色。
Border:1px solid red; 同时设置四条边
Border-方向（top,right,bottom,left）:1px solid red; 设置一条边的情况。
Border-方向（top,right,bottom,left）:none 不要某条边的设置方法。
案例 新闻案例，排版
案例 新闻列表
<style type="text/css">
.title,.content{ /*多元素组合声明*/
width:500px; /*设置div的宽度*/
border:1px solid green;/*设置div的边框*/
}
.title{
height:45px; /*设置div的高度*/
line-height:45px; /*设置div的行高*/
background:green; /*设置div的背景色*/
font-size:25px;/*设置字体的大小*/
font-weight:200;/*设置字体的加粗*/
}
.content a:link,.content a:visited{color:gray; text-decoration:none;}/*同时声明链接默认样式及鼠标单击过后的样式*/
.content a:hover{color:red; text-decoration:none;}/*设置鼠标放上面的样式*/
.content li{
border-bottom:1px dashed gray; /*设置li的底边的线的样式*/
width: 450px; height:25px; /*设置li的宽和高*/
line-height:25px;/*设置li行高*/
}
</style>
Body中的内容：
<div class="title"> 新闻中心</div>
<div class="content">
<ul>
<li><a href="#">长春供暖首日遇重度“烟霾“ 市民:以为谁家着火了</a></li>
<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
<li><a href="#">年内5次降息为买房人减负 百万房贷可省17万</a></li>
<li><a href="#">台湾太平岛灯塔完工 可照射越南所占岛礁</a></li>
<li><a href="#">解放军允许智能手机进军营安装部队自研软件</a></li>
<li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
</ul>
</div>
最后效果如下：
CSS简介及基本知识的更多相关文章
- CSS 简介
CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...
- CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS：CSS 简介
ylbtech-CSS:CSS 简介 1.返回顶部 1. CSS 简介 你需要具备的知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML / XHTML 如果你希望首先学习这些项目,请在 ...
- html5快速入门（二）—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- Htmlt_Div+Css简介
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- CSS 简介、 选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- CSS（一）：CSS简介和基本语法
一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS简介
HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...
随机推荐
- Mycat 分片规则详解--单月小时分片
实现方式:单月内按照小时拆分,最小粒度是小时,一天最多可以有24个分片,最少1个分片,下个月从头开始循环 优点:使数据按照小时来进行分时存储,颗粒度比日期(天)分片要小,适用于数据采集类存储分片 缺点 ...
- Django——ORM
Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...
- [luogu1168]中位数_优先队列
中位数 题目大意:输出读入的前2*k+1个数的中位数.一共有n个数,按照读入顺序. 注释:$1\le n \le 10^9$. 想法:这是优先队列的一个应用qwq.我们弄两个堆.小根堆和大根堆,保证: ...
- Android，资料分享（2015 版）
Java 学习 我要再次强调,一定要有Java 基础(虽然现在使用其他语言也可以开发Android,但毕竟是很小众),也不要认为学习Java 两三周就可以不用管了,这会在以后的深入学习中暴露出问题,所 ...
- (转)[置顶] Android APK反编译就这么简单 详解（附图） .
在学习Android开发的过程你,你往往会去借鉴别人的应用是怎么开发的,那些漂亮的动画和精致的布局可能会让你爱不释手,作为一个开发者,你可能会很想知道这些效果界面是怎么去实现的,这时,你便可以对改应用 ...
- SpringBoot12 QueryDSL01之QueryDSL介绍、springBoot项目中集成QueryDSL
1 QueryDSL介绍 1.1 背景 QueryDSL的诞生解决了HQL查询类型安全方面的缺陷:HQL查询的扩展需要用字符串拼接的方式进行,这往往会导致代码的阅读困难:通过字符串对域类型和属性的不安 ...
- iPhone页面的常用调试方法
在iPhone中调试,大体上与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用. 本文基于此,简要介绍在iPhone中如何调试页面. 最终可以实现在Mac平台使 ...
- [学习笔记] 模拟退火 (Simulated Annealing)
真没想到这东西真的在考场上用到了...顺便水篇blog以示诈尸好了(逃 模拟退火算法 模拟退火是一种随机化算法, 用于求函数的极值qwq 比如给出一个问题, 我们要求最优解的值, 但是可能的方案数量极 ...
- （译文）掌握JavaScript基础--理解this关键字的新思路
普通函数 下面这种就是普通函数 function add(x, y) { return x + y; } 每个普通函数被调用的时候,都相当于有一个this参数传进来. 内部函数this不会是外部函数传 ...
- Docker深入浅出系列教程——Docker简介
我是架构师张飞洪,钻进浩瀚代码,十年有余,人不堪其累,吾不改其乐.如果你和我的看法不一样,请关注我的头条号,我们一起奇闻共赏,疑义相析. 本节属于入门简介,从三个小方面进行简单介绍Docker. Do ...