CSS概述

CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

那么CSS和HTML是如何在网页代码中相结合的呢?通过四种方式:style属性 、style标签、导入和链接。

CSS与HTML相结合的四种方式

☆ 1、style属性方式

这种方式很少用,因为还是和HTML差不多。

一般用后面3种。

<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>

☆ 2、style标签方式

<style type=”text/css”>
p { color:#FF0000;}
</style>

☆ 3、导入方式

<style type="text/css">
@import url(myDiv.css)
</style>

☆ 4、链接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" /> 

相关语法

☆样式优先级

由上到下,由外到内。优先级由低到高。——总之,一般情况是以后加载为主,但还有细节优先级问题(后面会讲到)。

☆CSS代码格式

选择器名称 { 属性名:属性值;属性名:属性值;…….}

属性与属性之间用 分号 隔开

属性与属性值直接按用 冒号 连接

如果一个属性有多个值的话,那么多个值用 空格 隔开。

选择器

就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器(标签本身就是封装数据的容器)。

☆选择器共有三种:

1) html标签名选择器。使用的就是html的标签名。

(也就是直接用html中的标签)

2) class选择器。其实使用的是标签中的class属性。

(前面加:# )

3) id选择器。其实使用的是标签的中的id属性。

(前面加:. )

每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。

在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。

☆选择器的优先级

标签名选择器 < class选择器 < id选择器 < style属性

扩展选择器

☆关联选择器

标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。例如:

p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>湖南城市学院</b>段落样式</p>
<p>P标签段落</p>

设置P标签。

设置P标签中的b标签。

☆组合选择器

对多个选择器进行相同样式的定义。例如,我们想对“div中的标签”和“类名为cc”的区域设置相同的样式,则可以定义如下的组合选择器:

.cc, div b{/*不同选择器之间用逗号分开*/
background-color:#0000ff;
color:#fff;
}

设置id=”cc”的标签和div标签下的b标签。

☆伪元素选择器

其实就在html中预先定义好的一些选择器,称为伪元素。

格式:标签名:伪元素。类名 标签名。类名:伪元素。

超链接a标签中的伪元素:

a:link 超链接未点击状态。

a:visited 被访问后的状态。

a:hover 光标移到超链接上的状态(未点击)。

a:active 点击超链接时的状态。

段落p标签中的伪元素:

p:first-line 段落的第一行文本。

p:first-letter 段落中的第一个字母。

自定义伪元素:

:focus 具有焦点的元素(其实有点类似点击后的监听)

div:hover{
background-color:#f00;
color:#fff;
}

CSS的盒子模型

◇边框(border)

上 border-top

下 border-bottom

左 border-left

右 border-right

◇内补丁(Paddings):内边距

上 padding-top

下 padding-bottom

左 padding-left

右 padding-right

◇外补丁(Margins):外边距

上 margin-top

下 margin-bottom

左 margin-left

右 margin-right

边框(border)—这个元素内容的封闭图形的边界

内补丁(Paddings):内边距—自己这个元素边界距离自己内容文字的距离

外补丁(Margins):外边距—自己这个元素的边界距离另一个元素的边界(边框)的距离

☆CSS布局——漂浮

◇ float : none | left | right

none : 默认值。对象不飘浮

left : 文本流向对象的右边

(本对象流向左边)

right : 文本流向对象的左边

(本对象流向右边)

◇ clear : none | left | right | both

none :  默认值。允许两边都可以有浮动对象

left :  不允许左边有浮动对象

right :  不允许右边有浮动对象

both :  不允许有浮动对象

(如果不允许浮动对象,且正好有一个对象漂浮过来,需要占这个对象一行位置,则这个对象移动,给那个漂浮过来的对象让出一行位置,让他们不会重叠)

☆CSS布局——定位

◇ position : static | absolute | fixed | relative

static :  默认值。无特殊定位,对象遵循HTML定位规则。

absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义。

fixed :  未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。

relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置。

absolute —绝对定位。

如果某个对象用了绝对定位,其实就相当于这个对象漂浮在另一个层面(重叠),而原来层面上自己占的位置被其他模块覆盖。

relative —相对定位。

如果某个对象用了相对定位,也相当于这个对象漂浮在另一个层面(重叠),但是原来层面上自己占的位置不会被其他模块覆盖。

☆CSS布局——图文混排

☆CSS布局——图像签名

(这2个方式的实现其实就是用了盒子模型,绝对定位或相对定位来实现的)

CSS还有很多知识点,可以多写写,看看API就熟悉了,基本语法也就这么多~~

CSS---网络编程的更多相关文章

  1. 猫哥网络编程系列:详解 BAT 面试题

    从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

  2. [转]12篇学通C#网络编程——第二篇 HTTP应用编程(上)

    本文转自:http://www.cnblogs.com/huangxincheng/archive/2012/01/09/2316745.html 我们学习网络编程最熟悉的莫过于Http,好,我们就从 ...

  3. 物联网网络编程、Web编程综述

    本文是基于嵌入式物联网研发工程师的视觉对网络编程和web编程进行阐述.对于专注J2EE后端服务开发的童鞋们来说,这篇文章可能稍显简单.但是网络编程和web编程对于绝大部分嵌入式物联网工程师来说是一块真 ...

  4. JAVA基础知识之网络编程——-网络基础(Java的http get和post请求,多线程下载)

    本文主要介绍java.net下为网络编程提供的一些基础包,InetAddress代表一个IP协议对象,可以用来获取IP地址,Host name之类的信息.URL和URLConnect可以用来访问web ...

  5. iOS 网络编程:socket

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  6. Android网络编程概述

    Android网络编程概述 首先,应该了解的几个问题: 1)Android平台网络相关API接口 a) java.net.*(标准Java接口) java.net.*提供与联网有关的类,包括流.数据包 ...

  7. Java:网络编程

    一.因特网地址 InetAddress类:实现主机名和因特网地址之间的转换. InetAddress address=InetAddress.getByName(String);返回一个InetAdd ...

  8. 脑残式网络编程入门(四):快速理解HTTP/2的服务器推送(Server Push)

    本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...

  9. 老师的blog整理 .网络编程部分 .网络编程部分 前端部分 django基础部分

    老师的blog整理 python基础部分: 宝哥blog: https://www.cnblogs.com/guobaoyuan/ 开哥blog: https://home.cnblogs.com/u ...

  10. 让网络编程更轻松和有趣 t-io

    原文:https://www.oschina.net/p/t-io 注意:还是尽量去看原文,因为原文下面的评论也很有意思,可以参考大牛的讨论学习到新的东西 授权协议:Apache 开发语言:Java ...

随机推荐

  1. nvmw install 失败. 需修改"Msxml2.XMLHTTP"为"Msxml2.ServerXMLHTTP"

    准备在windows下学习nodejs. 下载了nvmw . 但没法安装node的任何版本. 都是报错如下: C:\Users\WXG>nvmw install v0.12.0 x86 Star ...

  2. storm学习之入门篇(二)

    Strom的简单实现 Spout的实现 对文件的改变进行分开的监听,并监视目录下有无新日志文件添加. 在数据得到了字段的说明后,将其转换成tuple. 声明Spout和Bolt之间的分组,并决定tup ...

  3. Codevs 1702 素数判定 2(Fermat定理)

    1702 素数判定 2 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 传送门 题目描述 Description 一个数,他是素数么? 设他为P满足(P< ...

  4. 窗口 namedWindow(), destroyWindow(), destroyAllWindows()[OpenCV 笔记6]

    void namedWindow(const string& winname, int flags=WINDOW_AUTOSIZE); 创建一个窗口.imshow直接指定窗口名,可以省去此函数 ...

  5. demo_08webStroage案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JavaScript获取非行间样式/定义样式

    html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...

  7. node开子线程模块--tagg2

    tagg2包同样具有tagg包的多线程功能,采用新的node-gyp命令进行编译,同时它跨平台支持,mac,linux,windows下都可以使用,对开发人员的api也更加友好.安装方法很简单,直接n ...

  8. 直接通过curl方式取得数据、模拟登陆、POST数据

    博客园的Markdown编辑器太坑爹了@!!! 算了.不用格式了!!! /********************** curl 系列 ***********************/ //直接通过c ...

  9. 坑爹的NSIS转义符:$ (在NSIS的MessageBox中写换行文字)

    最近的项目中,发现了NSIS一个比较坑的地方:$ 不但是变量常量的开头,还是一个转义字符. 大家有没有发现,NSIS写的脚本中,如果要让弹出消息框中的文字带换行功能,“\r\n” 是不是很不管用呢? ...

  10. makefile debug

    1. 使用warning指令 warning 是个不错的命令,可以打印出消息,来判断makefile执行的流程 2.使用ifeq ifneq 当makefile被多次调用到的时候,如果都输出warni ...