web开发之页面css样式表、以及（jquery+css）

最新推荐文章于 2022-09-28 11:46:43 发布
最新推荐文章于 2022-09-28 11:46:43 发布
阅读量638 收藏
点赞数
分类专栏： Web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yan_dk/article/details/8298133
版权

         CSS：层叠样式表。

CSS选择器

标记选择器

  <style>
  p{color:red;font-size:4cm;border:2px solid blue}
  </style>

类别选择器

<HEAD>

<style>
.p_one{color:red}
</style>
 </HEAD>

 <BODY>
  <p class="p_one">您好！</p>
 </BODY>

 ID选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<!--id选择器-->
<style>
#p_one{color:red}
</style>

 </HEAD>

 <BODY>
  <p id="p_one">您好！</p>
 </BODY>
</HTML> 

  

CSS几个引入方法

          页面中使用CSS有4种使用方法：内联样式表、嵌入样式表、外部样式表、导入样式表。

内联样式表

            <p style="color:red;font-size:4cm;border:2px solid blue">您好！</p>

嵌入样式表

   

 <HEAD>

...
  <style>
  p{color:red;font-size:4cm;border:2px solid blue}
  </style>
 </HEAD>

 <BODY>
  <p >您好！</p>
 </BODY>

外部样式表

引用外部css文件，如test.css

p{color:red;font-size:4cm;border:2px solid blue}

页面正文

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<link rel="stylesheet" type="text/css" href="test.css">  
  
 </HEAD>

 <BODY>
  <p >您好！</p>
 </BODY>
</HTML>

导入样式表

引用的样式表文件imp.css

p{color:red;background-color:yellow}

页面正文

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<!--
导入样式表
-->

  <style>
@import url(imp.css);
  </style>
 </HEAD>

 <BODY>
  <p >您好！</p>
 </BODY>
</HTML>

 jquery+css

1.css方法
  $(".detail_list .op_td .op_td_zoomto").css("margin","1px");
2.removeClass方法
$(".detailinfo_list tbody tr").removeClass('hilight');
3.addClass方法
$(".detailinfo_list tbody tr").r.addClass("hilight");

css样式调试

基本方法：推荐使用chrom调试器，浏览页面，调用“审查元素”，可以看到页面脚本，修改调整css样式，即时预览修改后效果，若效果正确后，就可以根据调整内容修改源码工程中具体的脚本。
有些css样式不好调，引用css文件，但有些个性化的样式，可以使用标记的style属性重载。
如表格的margin属性，调试了许多参数都不理想，后来使用如下方式才调出效果，如下：
<a href="javascript:void(0);" class="op_td_query" style="margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 4px; " title="定位"></a>
评价：margin方法位置不好调，左右上下间距都要照顾到，索性将所有属性进行重载，这样样式才好调。比用css函数方法直接方便。

 

 

 

 

参考：http://www.56.com/u38/v_ODEyNTYzMjM.html 初探css样式表

云焰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web----常用样式
weixin_53163211的博客
09-12 479
背景图片 url中放置图片路径（相对 绝对 网络） background-image: url(""); 设置背景图片是否重复 默认重复 background-repeat: no-repeat; 调整背景图片的位置 第一个值代表水平方向 第二个值代表竖直方向 /* background-position:0px 400px ; */ background-position: center center; 调整背景图片大小 第一个值代表背景图片宽度 第二个值代表背景图片高度
JavaWeb-CSS样式表
toward_south的博客
03-08 1271
一 CSS规则  1 选择符，也称选择器  2 属性  3 属性值&lt;style&gt; a{ font-size:9px; color:#F93; } &lt;/style&gt;这里需要注意，&lt;style&gt;要写在&lt;body&gt;前面二 CSS选择器1 标记选择器2 类别选择器3 id选择器    这里需要注意 在HTML中不能包含两个相同的id标记，因此...
web学习—css样式表—css基础语法
月夜领域
08-18 680
1、样式表的加载方式：         内联样式：直接以style属性加上要设置的属性值（属性与值之间用“:”隔开）。作为html标签的属性加入到标签中。         内部样式：使用标签直接把css文件中的内容加载到HTML文档内部。即把css内容写到与之间。                             但是标签要在标签内部。对于标签用法，稍后再说。         外
web网页样式学习笔记03
weixin_47281509的博客
09-28 157
web页面样式学习笔记
web页面 ：css 选择器
qq_50270150的博客
05-20 220
文章目录 一、什么是css选择器？ 二、常见选择器类型 总结 一、什么是css选择器？ css选择器又被称为css样式属性、css属性选择器，css中的“选择器”指明了“{}”中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素；常用选择器可分为标签名选择器、类选择器、id选择器、派生选择器、子元素选择器、分组选择器。 二、常见的选择器类型 .class .intro 选择所有class="intro"的元素 #id #firstname 选.
jQuery 无刷新切换CSS样式表改变风格
05-01
内容索引:脚本资源,jQuery,无刷新风格切换　jQuery 无刷新切换网站风格，如果你想在你的网站中加入这项功能，这个实例最适合您了，它使用了jQuery插件，用起来更稳定、省心，你需要准备好多份CSS样式表文件，这和...
jquery+css实现下拉列表功能
10-19
2. **CSS**: CSS (层叠样式表) 用于控制网页的布局和样式。在这个实例中，CSS定义了下拉列表各个部分的样式，如隐藏显示、边框、宽度等，使界面看起来更加美观。 3. **HTML结构**：HTML文档结构包括了一个`<div>`...
使用jQuery实现Web页面换肤功能的要点解析
11-25
除了切换 CSS 样式表文件之外，通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选项。 那么基本工作流程就出来了：访问网页——JS 读取 Cookie...
Web前端开发项目教程(HTML5+CSS3+JavaScript)全册习题参考答案.pdf
11-28
题目中提到了`<link>`标签，用于引入外部样式表文件，`type="text/css"`指定样式表类型，`rel="stylesheet"`定义链接关系。CSS属性如`float`用于浮动元素，`display: grid`创建CSS网格布局，`list-style-image`设置...
jQuery+PHP+Mysql实现抽奖程序
10-19
接下来，CSS样式用于美化这些元素，如设定按钮的背景图片、边框样式和字体大小等。`#stop`按钮的`display:none`属性确保开始按钮是唯一的可见操作。 在jQuery部分，我们使用`$(function() {})`来确保在DOM加载完成...
CSS样式大全
09-08
CSS样式大全，所有标签的所有样式全部在这里了 绝对完整，绝对漂亮
移动Web界面样式
04-13
移动Web界面样式.
web前端课程设计以及报告，jquery+js+css+html
06-05
web前端课程设计，jquery+js+css+html，实现基本前台所有界面，
html+css实现简单分页页码效果
04-19
html+css实现简单分页页码效果源码，尚且没有复杂的后台，给前端新手学习之用
MySQL续_JS
MMMMMMMay
06-30 399
SQL续day_170629:应用dept表：应用emp表：IN 操作符  IN 操作符允许我们在 WHERE 子句中规定多个值。SQL IN 语法:SELECT column_name(s) FROM table_name WHERE column_name IN (value1,value2,...)example:我们查询empno为7900，7901，7902的三条信息：SELECT * ...
WEB基础之：CSS 用户界面样式
f_carey的博客
12-30 352
用户界面样式1. 光标2. 轮廓 outline2.1 设置轮廓样式2.2 轮廓宽度2.3 设置轮廓颜色2.4 汇总 1. 光标 cursor:default 类型 属性值 描述 General auto 浏览器根据当前内容决定指针样式，例如当是内容是文字时使用text样式 General default 默认指针，通常是箭头。 General none 无指针被渲染 链接及状态 context-menu 指针下有可用内容目录。 链接及状态 help 指示帮助 链接及状
HTML——jQuery—css样式+html&css方法
piduocheng0577的博客
03-18 108
目录 css样式 html&css方法 css样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.4.1.min.js" >&...
web前端开发之html5,css与jQuery
iteye_983的博客
02-10 353
在web前端开发中，利用WebStorm编程软件 我们经常会用到html5，css与jQuery   我们大多会用html5来进行页面框架的搭建，通过引入css来满足网页越来越丰富的表现力，通过引入javascript来实现事件，从而做出漂亮的网页   一  html   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"...
css三种样式表的创建和区别
qq_33221699的博客
11-15 857
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; @import url(&quot
《web前端开发简明教程(html+css+javascript+jquery)》pdf
最新发布
10-06
接着，教程介绍了CSS（层叠样式表），CSS用于为HTML页面添加样式和外观效果。本教程涵盖了CSS的基本语法，包括选择器、属性和值，并提供了一些实际示例来帮助读者理解如何应用样式。 然后，教程进一步深入介绍了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云焰

你的鼓励是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值