0

0

CSS-网络编程_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:16:51

|

1328人浏览过

|

来源于php中文网

原创

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中经常用。

☆选择器的优先级
标签名选择器

扩展选择器

☆关联选择器

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

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

设置P标签。
设置P标签中的b标签。

☆组合选择器

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

中文企业网站建设源码2.0
中文企业网站建设源码2.0

喜满堂网络公司开发(中文网站建设源码)本程序因为是中文UTF-8编码原因,只支持Windows IIS。是支持面向中小企业的网站管理系统,网站简洁大气。占用少,速度快等优点。采用div+css构架,Asp+Access编程数据,方便广大网站建设使用。网站并且针对Baidu、Google优化设计。后台功能概述:含新闻发布,产品展示,留言咨询等是全后台,一站式管理。后台管理地址:guanli(可以随意

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法
pixiv网页版官网登录与阅读指南_pixiv官网直达入口与在线访问方法

本专题系统整理pixiv网页版官网入口及登录访问方式,涵盖官网登录页面直达路径、在线阅读入口及快速进入方法说明,帮助用户高效找到pixiv官方网站,实现便捷、安全的网页端浏览与账号登录体验。

463

2026.02.13

微博网页版主页入口与登录指南_官方网页端快速访问方法
微博网页版主页入口与登录指南_官方网页端快速访问方法

本专题系统整理微博网页版官方入口及网页端登录方式,涵盖首页直达地址、账号登录流程与常见访问问题说明,帮助用户快速找到微博官网主页,实现便捷、安全的网页端登录与内容浏览体验。

135

2026.02.13

Flutter跨平台开发与状态管理实战
Flutter跨平台开发与状态管理实战

本专题围绕Flutter框架展开,系统讲解跨平台UI构建原理与状态管理方案。内容涵盖Widget生命周期、路由管理、Provider与Bloc状态管理模式、网络请求封装及性能优化技巧。通过实战项目演示,帮助开发者构建流畅、可维护的跨平台移动应用。

64

2026.02.13

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

20

2026.02.13

Redis高可用架构与分布式缓存实战
Redis高可用架构与分布式缓存实战

本专题围绕 Redis 在高并发系统中的应用展开,系统讲解主从复制、哨兵机制、Cluster 集群模式及数据分片原理。内容涵盖缓存穿透与雪崩解决方案、分布式锁实现、热点数据优化及持久化策略。通过真实业务场景演示,帮助开发者构建高可用、可扩展的分布式缓存系统。

26

2026.02.13

c语言 数据类型
c语言 数据类型

本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.12

雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法
雨课堂网页版登录入口与使用指南_官方在线教学平台访问方法

本专题系统整理雨课堂网页版官方入口及在线登录方式,涵盖账号登录流程、官方直连入口及平台访问方法说明,帮助师生用户快速进入雨课堂在线教学平台,实现便捷、高效的课程学习与教学管理体验。

14

2026.02.12

豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法
豆包AI网页版入口与智能创作指南_官方在线写作与图片生成使用方法

本专题汇总豆包AI官方网页版入口及在线使用方式,涵盖智能写作工具、图片生成体验入口和官网登录方法,帮助用户快速直达豆包AI平台,高效完成文本创作与AI生图任务,实现便捷智能创作体验。

524

2026.02.12

PostgreSQL性能优化与索引调优实战
PostgreSQL性能优化与索引调优实战

本专题面向后端开发与数据库工程师,深入讲解 PostgreSQL 查询优化原理与索引机制。内容包括执行计划分析、常见索引类型对比、慢查询优化策略、事务隔离级别以及高并发场景下的性能调优技巧。通过实战案例解析,帮助开发者提升数据库响应速度与系统稳定性。

53

2026.02.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号