CSS---网络编程

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就熟悉了,基本语法也就这么多~~

时间: 2024-09-10 06:54:19

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

入门问题:请指一条学习之路!(网络编程/网页编程/Web编程)

问题描述 入门问题:请指一条学习之路!(网络编程/网页编程/Web编程) 我之前兴趣一直在单机方面的编程,但是网络早已铺天盖地,不搞网络编程是就成了井底之蛙.但是网上.书店有关网络编程/网页编程/Web编程的内容让我眼花缭乱,感觉无从下手,所以请前辈帮我一条学习之路.比如先学什么技术,再学什么等等,最好推荐几本有名的书.谢谢! 解决方案 先挑选一种语言,比如PHP.Java或者C#,然后挑选一个方向,比如前端或者后端.然后才好谈到怎么学和看什么书. 推荐你用这种语言作为关键字在amazon中搜索

【Android】Android网络编程概述

Android网络编程概述 原文来自:http://blog.csdn.net/kieven2008/article/details/8210737 首先,应该了解的几个问题: 1)Android平台网络相关API接口  a) java.net.*(标准Java接口)  java.net.*提供与联网有关的类,包括流.数据包套接字(socket).Internet协议.常见Http处理等.比如:创建URL,以及URLConnection/HttpURLConnection对象.设置链接参数.链接

python网络编程之数据传输UDP实例分析

  本文实例讲述了python网络编程之数据传输UDP实现方法.分享给大家供大家参考.具体分析如下: 一.问题: 你觉得网络上像msn,qq之类的工具在多台机器之间互相传输数据神秘吗?你也想玩一下在两台机器之间传数据吗?今天让python告诉我们基本原理吧,当然只是做简单的了解,实际情况复杂的多. 我们今天用python实现一个简单的udp程序. 二.程序实现: 1) 使用模块 (socket)套接字模块: 套接字模块是一个非常简单的基于对象的接口,它提供对低层BSD套接字样式网络的访问 .使用

python网络编程之文件下载实例分析

  本文实例讲述了python网络编程之文件下载实现方法.分享给大家供大家参考.具体如下: 真是越看越喜欢python啊,想要了解它提供的http和ftp下载功能,原来是如此的简单. 1.相应模块 ftplib模块定义了FTP类和一些方法,用以进行客户端的ftp编程.我们可用python编写一个自已的ftp客户端程序,用于下载文件或镜像站点.如果想了解ftp协议的详细内容,请参考RFC959或是查看python帮助吧. Urllib模块提供了非常高级的接口来从网络上抓取数据,主要使用到的是url

网络编程Socket

 网络模型 OSI参考模型 TCP/IP参考模型 可以上网脑补 学的网络编程主要在应用层(我想android.JavaWeb.QQ.梦幻西游等吧,估计是).传输层和网际层混,每个层都有自己的协议规则. 传输层主要用TCP(同步:面向连接,数据量大).UDP(异步:面向无连接,大小限制在64k内,QQ聊天.网络视频用的UDP) 网际层主要用IP协议 应用层协议:HTTP 网络通讯要素 IP地址:标识网络上的电脑的,相当于给电脑取个唯一的名字   192.168.1.1,最大只能设置255这是字

Java IO和网络编程的一些问题

1.网络编程时的同步.异步.阻塞.非阻塞? 同步:函数调用在没得到结果之前,没有调用结果,不返回任何结果.异步:函数调用在没得到结果之前,没有调用结果,返回状态信息.阻塞:函数调用在没得到结果之前,当前线程挂起.得到结果后才返回.非阻塞:函数调用在没得到结果之前,当前线程不会挂起,立即返回结果. 2.Java如何实现无阻塞方式的Socket编程? NIO有效解决了多线程服务器存在的线程开销问题. 在NIO中使用多线程主要目的不是为了应对每个客户端请求而分配独立的服务线程, 而是通过多线程充分利用

Java编程那些事儿101——网络编程概述

第十三章 网络编程 网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习. 在学习网络编程以前,很多初学者可能觉得网络编程是比较复杂的系统工程,需要了解很多和网络相关的基础知识,其实这些都不是很必需的.首先来问一个问题:你会打手机吗?很多人可能说肯定会啊,不就是按按电话号码,拨打电话嘛,很简单的事情啊!其实初学者如果入门网络编程的话也可以做到这么简单! 网络编程就是在两个或两个以上的设备(例如计算机)之间传输

iOS开发网络篇—网络编程基础(二)

下面叙述的是关于几个必须要知道的iOS网络编程入门级别的要点: 1.客户端如何找到连接的服务器 客户端通过URL找到想要连接的服务器 2.什么是URL URL的全称是Uniform Resource Locator(统一资源定位符) 通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位置,互联网上的每个资源都有一个唯一的URL URL的基本格式 = 协议://主机地址/路径 http://www.520it.com/img/logo.png 协议:不同的协议,代表着不同的资源查

网络编程的一些简单总结

网络编程是一个很大也很有趣的话题,要写好一个高性能并且bug少的服务端或者客户端程序还是挺不容易的,而且往往涉及到进程线程管理/内存管理/VFS/协议栈等许多相关的知识,尤其是并发.所以不仅仅只是会使用socket那么简单. 网络编程模型 几个相关概念: 阻塞/非阻塞 阻塞和非阻塞通常是指文件描述符本身的属性,拿socket来说,当socket读缓冲区中没有数据时或者写缓冲区满时,都会造成我们read/recv或者write/send系统调用阻塞.而非阻塞socket在这种情况下会产生EWOUL

Python中利用原始套接字进行网络编程的示例

  这篇文章主要介绍了Python中利用原始套接字进行网络编程的示例,使用sock_raw接受和发送数据包可以避开网络协议的诸多限制,需要的朋友可以参考下 在实验中需要自己构造单独的HTTP数据报文,而使用SOCK_STREAM进行发送数据包,需要进行完整的TCP交互. 因此想使用原始套接字进行编程,直接构造数据包,并在IP层进行发送,即采用SOCK_RAW进行数据发送. 使用SOCK_RAW的优势是,可以对数据包进行完整的修改,可以处理IP层上的所有数据包,对各字段进行修改,而不受UDP和TC