如何查看DIV被设置什么CSS样式

如何查看DIV被设置什么CSS样式呢?可以扩展到了解查看任何HTML标签被设置什么CSS样式。DIVCSS5教大家掌握如何使用谷歌浏览器查找网页中某局部DIV布局结构以及对应设置什么CSS样式。

一、直接观察div标签被设置什么样式   -   TOP

比较简单的布局,我们直接从浏览器上观察效果就能分析一下地方被设置什么样式。


简单直观分析DIV CSS布局用什么样式图

如上图,可以大致分析对应样式有哪些,比如使用背景图片,设置宽度多少、设置CSS高度多少、字体大小、文字靠左、距离左多少。

以上分析只是直观能看到的能分析的大致使用什么CSS样式,但如果要想精确的分析对应布局CSS样式到底设置什么,那必须的看对应CSS代码。

实在分析观察不出的,那就需要去查看DIV对应CLASS或ID对应CSS选择器的样式。

二、查找div里的class或id对应样式   -   TOP


要分析对应DIV CSS案例截图

1、工具:DIVCSS5使用谷歌浏览器(Google Chrome)进行分析

2、查找分析某处DIV布局使用什么CSS样式的流程

2-1:首先打开网页


打开上海诚凯男子性功能康复治疗中心截图

2-2:查看源代码
在网页空白处鼠标右键-》查看网页源代码


查看源代码

对应HTML源代码会在谷歌浏览器选项卡自动新建打开。


对应网页HTML源代码截图

2-3:找到对应要查找地方DIV
可以使用快捷键“ctrl+F”查找要找DIV布局处。


通过对比原来网页内容找到对应内容并获取对应DIV布局结构信息

查找技巧,使用浏览器自带查找工具,然后对比所要找DIV内容与原来正常访问时内容,找到确定的DIV布局结构。

这里找到对应内容DIV布局内容代码:

    1. <h2 class="home"><a href="/" title="转到 上海早泄治疗医院">DIVCSS5</a></h2>

从以上代码可以得到,需要分析那个布局使用H2标签进行布局,同时使用class="home"

记住对应ID和CLASS命名,这里是用class命名为“home”,可以想到CSS肯定使用".home{.....}"的选择器。

2-3:打开CSS代码
如果CSS是使用HTML引入外部CSS文件,那需要打开对应这个页面外部CSS文件,以便查找CSS代码里对应Id或Class命名,从而获取得到对应DIV布局使用了什么CSS样式。


找到link引入外部CSS文件代码

打开CSS文件:在谷歌浏览器中直接点击link对应CSS文件URL即可,在谷歌浏览器打开CSS文件。


打开对应CSS文件查看到对应CSS代码

2-4:使用查找工具找到对应CSS选择器
使用谷歌浏览器查找工具,快捷键“Ctrl+F”打开查找工具,将HTML分析的id或class命名拷贝到查找输入框进行查找,这里是使用“class="home"”,我们知道class对应CSS就是以半角英文小写句号“.”为选择符号开头命名的“.home”,进行查找


查找到两处对应CSS样式

对应DIV CSS布局的CSS代码如下:

    1. h2.home{height:24px;line-height:20px;font-size:14px;color:#000;text-indent:25px;
      background:url(divcss5-left-li.gif) no-repeat 0 0}
    2. h2.home a{color:#000;text-decoration:none}

分析得出对应地方设置CSS样式为:

2-4-1:对应H2标签设置高度为24px、css上下居中文字的行高为24px、字体大小为14px、字体颜色为黑色“#000”、设置CSS缩进25px、设置图片为背景不重复不平铺(可以从网页实践效果看出是对应的那个图标);

2-4-2:设置对应h2标签内的超链接文字字体颜色为黑色“#000”、CSS去掉超链接字体下划线。

以上就是DIVCSS5介绍如何分析一个网页某处局部使用什么标签布局、对应设置了什么CSS样式,这样分析可以有助于大家平时借鉴别人CSS布局、从而自己掌握不太会的DIV+CSS布局方法技巧。

时间: 2024-10-06 14:18:47

如何查看DIV被设置什么CSS样式的相关文章

推荐一款非常棒的谷歌插件---快速查看HTML页面元素的CSS样式

一.下载地址 http://chromecj.com/web-development/2015-05/456/download.html 二.简介 CssViewer是一款快速查看当前页面元素的CSS样式的插件,无论是在做新的网页还是在做修改 相信他都能帮上大忙. 下载安装都非常的简单,测试过支持chrome支持360浏览器,别的没有测过.  三.截图

关于bootstrap中css样式与自己设置的css样式相撞问题

1.在对网页进行布局前就先将bootstrap包中的东西导入到自己的页面中去.自己定义的css样式导入在bootstrap之后,可以起到当类名与bootstrap重复时对bootstrap样式践行覆盖的作用. 2.尽量避免所取类名与bootstrap相撞 3.当页面显示效果与自己所想不符时,利用审查元素找到该元素对应的样式,有可能是因为bootstrap中定义的样式起了作用. 4.如若上一步成立,可在自己的css样式中对其进行覆盖. 原文地址:https://www.cnblogs.com/cc

设置div背景透明的CSS样式

div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity: 1.0; height:300px; width:500px; background:#ccc; left:50%; top:50%;margin-top:-150px;margin-left:-250px;position:absolute;z-index:99; text-align:cen

DIV完美等分的CSS样式实现

一.问题场景 传统使用width属性配合float总是最右边出现间隙,需要实现任意个DIV的完美等分,包括横向和纵向 二.实现 父元素样式 /*盒模型*/ display: -webkit-box; display: -moz-box; display: box; /*横向or纵向*/ -webkit-box-orient: horizontal; /* 垂直是vertical */ -moz-box-orient: horizontal; /* 垂直是vertical */ box-orien

jQuery改变div内容并增加css样式

var account = JobCircle.Util.Common.getSession('account'); if(!account){ $("#iflogin").html('<a href="login.html">登陆</a>'); $("#iflogin >a").css({"color":"#ccc","font-size":"1

怎么确定要对DIV设置什么CSS属性样式

如何确定要对DIV设置什么CSS属性样式呢?如何知道对div设置哪些CSS样式呢? 设置什么CSS样式不是凭空想象的而是有参考的,一般分三种情况下得到需要知道设置什么样式. 第一种:没有美工图,自己边思考布局 这种没有美工图也没有可参考的情况下DIV CSS布局,根据自己实际构思的想法来布局设置CSS,比如布局左右结构时候,那就设置float:left和float:right实现对象靠左靠右,然后思考靠左靠右布局宽度多少,再设置宽度样式. 这种情况下布局网页比较慢,想一点布局一点,可能在思考到布

【03】全局 CSS 样式

全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型.在你项目中的每个页面都要参照下面的格式进行设置. <!DOCTYPE html> <html lang="

WEB前端--CSS样式优先级

转载信息: 作者: XuGang   网名:钢钢 出处: http://xugang.cnblogs.com 声明: 本文版权归作者和博客园共有.转载时必须保留此段声明,且在文章页面明显位置给出原文连接地址! 样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)I

当css样式表遇到层

(附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内容.这就是说,为了使样式表只对页面局部起修饰作用,设计者可以将页面的局部内容定义在某个范围之内,这个范围变称为CSS-layer(css层)css层可以通过HTML标签来定义,这种使用方法是web设计中的一枚利器. 1.行<span>和层<div>设计者常常把css样式表放在<s