0

0

JavaWeb之CSS详解

php中文网

php中文网

发布时间:2016-10-20 10:09:25

|

1110人浏览过

|

来源于php中文网

原创

css的简介

1、CSS概述及作用

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

2、 CSS和HTML的结合(*****)(四种)

  CSS与HTML的结合方式

  1.style属性方式:

  利用标签中style属性来改变每个标签的显示样式。

  例:   

立即学习Java免费学习笔记(深入)”;

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

  该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。

  2.style标签方式:(内嵌方式)

  在head标签中加入style标签,对多个标签进行统一修改。  

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

  该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。

  3.导入方式:(常用的方式)

  前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到,那么就用到这种方式。

  例:

<style type="text/css">
    @import url(css_3.css);
    div { color:#FF0000;}
style>  

  定义一个外部的CSS文件(.css)结尾的。
  @import url("css文件的地址");需要写在

  注:url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复,以本页定义样式为准。

  4.链接方式:(常用的方式)

  通过head标签中link标签来实现,前提也是先要有一个已定好的CSS文件。

  例:  

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

   ,不能写在

 

Css中margin属性详细解析
Css中margin属性详细解析

Css中margin属性详细解析

下载

  注:可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

3、CSS样式优先级和代码规范

  1.CSS的优先级

  (一般情况下)从上到下,由外到内,优先级从低到高的。
   特殊情况:标签名选择器

  2. CSS的代码规范

  (1)选择器名称{属性名:属性值;属性名:属性值;...}

  (2)属性与属性之间用 分号 隔开
  (3)属性与属性值直接按用 冒号 连接

  (3)如果一个属性有多个值,值与值直接用空格隔开
  例子  

div{border:值1 值2 值3}

 

4、CSS的选择器(*****)

  1.选择器:

  编写的CSS代码作用在哪个标签上。

  2.基本选择器:

  (1)标签名选择器

  每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
  在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。

  (2)class选择器:(常用的)
  在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。
  例:
  相同标签设置不同样式的时候,用class进行区分。

p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式p>
<p class=”pclass_2”>P标签样式p>

 
  不同标签进行相同设置的时候,用class进行统一定义。

.classname {color:#00FF00;}

<p class=”classname”>P标签样式p>
<div class=”classname”>DIV标签样式div>

  (3)id选择器:
  与class选择器类似,但格式不同,选择器的名称为:#id值。
  例:

#pid { color:#0000FF;}
<p id=”pid”>P标签样式p>

  注:多个标签同样可以定义相同的id值,但是对于JavaScript对标签元素的获取就会出错。所以形成习惯,确保id值的唯一性对于以后的数据库设计也很有好处。

  优先级(特殊):
  标签名选择器

  3.扩展选择器:

  (1)关联选择器:多个标签之间产生关系。
  中间用空格隔开
  (2)组合选择器:对多个不同的选择器设置相同的样式
  中间用逗号隔开
  (3)伪元素选择器:CSS定义好的选择器
  如果使用超链接的4个状态,使用的顺序: L V H A

 

5、CSS的布局(了解)

* 盒子模型

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

32

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

23

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

16

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

6

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

268

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

195

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

170

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

85

2026.01.31

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Go语言实战之 GraphQL
Go语言实战之 GraphQL

共10课时 | 0.8万人学习

c语言项目php解释器源码分析探索
c语言项目php解释器源码分析探索

共7课时 | 0.4万人学习

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

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