(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简介及基本知识的更多相关文章

  1. CSS 简介

    CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...

  2. CSS那些事儿-阅读随笔1（CSS简介与选择符）

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  3. CSS：CSS 简介

    ylbtech-CSS:CSS 简介 1.返回顶部 1. CSS 简介 你需要具备的知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML / XHTML 如果你希望首先学习这些项目,请在  ...

  4. html5快速入门（二）—— CSS简介

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  5. Htmlt_Div+Css简介

    DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV ...

  6. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  7. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. CSS（一）：CSS简介和基本语法

    一.CSS简介 1.什么是CSS CSS:Cascading Style Sheet:即层叠样式表.样式定义了如何显示HTML或XHTML元素.包括对字体.颜色.边距.高度.宽度.背景图片.网页定位等 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

随机推荐

  1. mySQL语法中的存储过程及if语句的使用简例

    create procedure gh() #注意各个地方的分号!此代码应先运行除掉最后一句的部分,然后运行call gh显示已经存储的结果 BEGIN declare c_no int; #声明数据 ...

  2. 什么是IPFS?(三)

    前两篇介绍了IPFS的基本概念, 那么IPFS都可以用来做什么? 如果你认为仅仅是CDN, 永久的web? Are you kidding me ? IPFS可是要 --改变世界的... --变世界的 ...

  3. 吐槽net下没有靠谱的FastDFS的sdk之使用thrift实现JAVA和C#互通

    事情是这样的,在一个新项目中引入了fastdfs,用这玩意做一些小数据的存储还是很方便的,然后在nuget上就找一个对接FastDFS的sdk,如下图: 一眼就看到了这个top1的sdk,应该会比较靠 ...

  4. Docker + webpack 打包前端项目

    码云代码地址: https://gitee.com/caonimashi/docker_deployment_front_end    构建基础镜像: 1.下载一个 Apline Linux 操作系统 ...

  5. Spring Clould负载均衡重要组件：Ribbon中重要类的用法

    Ribbon是Spring Cloud Netflix全家桶中负责负载均衡的组件,它是一组类库的集合.通过Ribbon,程序员能在不涉及到具体实现细节的基础上"透明"地用到负载均衡 ...

  6. 《PHP 设计模式》翻译完毕

    翻译进度请见:https://laravel-china.org/docs/php-design-patterns/2018?mode=sections 设计模式不仅代表着更快开发健壮软件的有用方法, ...

  7. New UWP Community Toolkit - XAML Brushes

    概述 上一篇 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾.接下来会针对每个重要更新,结合 SDK 源代码和调用代码详细讲解. 本篇我们 ...

  8. Java 小记 — RabbitMQ 的实践与思考

    前言 本篇随笔将汇总一些我对消息队列 RabbitMQ 的认识,顺便谈谈其在高并发和秒杀系统中的具体应用. 1. 预备示例 想了下,还是先抛出一个简单示例,随后再根据其具体应用场景进行扩展,我觉得这样 ...

  9. python 函数 装饰器的使用方法

    一.装饰器  首先,我们要了解到什么是开放封闭式原则? 软件一旦上线后,对修改源代码是封闭的,对功能的扩张是开放的,所以我们应该遵循开放封闭的原则. 也就是说:我们必须找到一种解决方案,能够在不修改一 ...

  10. New UWP Community Toolkit - Markdown

    概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 MarkdownTextBlock 和 MarkdownDoc ...