举报投诉联系我们 手机版 热门标签 编程学
您的位置：编程学 > css是什么意思 CSS

css是什么意思 CSS

2023-03-18 16:18 jQuery教程

css是什么意思 CSS

css是什么意思

CSS是Cascading Style Sheets（层叠样式表）的缩写，它是一种用于定义HTML文档的外观和格式的语言。它可以用来控制文本大小、颜色、字体、背景图片、布局等。

CSS可以使HTML文档更加美观，并且可以使HTML文档的内容与其样式分离，这样就可以在不同的浏览器上显示出相同的效果。例如，如果你想要在不同的浏览器上显示出相同的字体大小，你只需要在CSS中定义一个字体大小即可。

body { 
    font-size: 12px; 
}

CSS

jQuery - CSS 选择器方法

jQuery 库支持几乎所有的选择器，包括层叠样式表(CSS)。

使用 JQuery 库开发人员可以加强他们的网站，只要浏览器启用了 JavaScript，那么就不用担心浏览器及其版本。

大部分的 JQuery CSS 方法不修改 JQuery 对象的内容，它们用于将 CSS 属性应用到 DOM 元素中。

应用 CSS 属性

使用 jQuery 方法 css( PropertyName, PropertyValue )，那么应用任何 CSS 属性都将会非常简单。

下面是该方法的语法 ——

selector.css( PropertyName, PropertyValue );

这里你可以将 PropertyName 作为一个 JavaScript 字符串来传递并且基于它的值，PropertyValue 也会是一个字符串或一个整数。

示例

下面的例子为第二个列表项添加字体颜色。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts..cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>

   </head>

   <body>
      <div>

         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>

      </div>
   </body>

</html>

这将产生如下所示结果：

应用多个 CSS 属性

你可以使用一个 jQuery 方法 CSS( {key1:val1, key2:val2....) 应用多个 CSS 属性。你可以按你的喜好，在一个调用中应用许多属性。

下面是该方法的语法 ——

selector.css( {key1:val1, key2:val2....keyN:valN})

这里你可以把 key 作为属性传递，并且把 val 作为值传递，如上所示。

示例

下面的例子中为第二个列表项添加字体颜色及背景颜色。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts..cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>

   </head>

   <body>
      <div>

         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>

      </div>
   </body>

</html>

这将产生如下所示结果：

设置元素的宽和高

width( val ) 和 height( val ) 方法可以分别用于设置每个元素的宽和高。

示例

下面是一个简单的例子，设置了第一个 division 元素的宽，而其他元素的宽是由样式表设置的。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts..cn/attachments/image/wk/jquery/jquery.min.js"></script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>

      <style>
         div{ width:70px; height:50px; float:left; margin:5px; background:red; cursor:pointer; }
      </style>

   </head>

   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>

</html>

这将产生如下所示结果：

jQuery CSS 方法

下表列出了所有的方法，你可以使用 CSS 属性 ——

序号 方法 & 描述
1 css( name )

返回第一个匹配元素的样式属性。
2 css( name, value )

在所有匹配的元素中，将一个样式属性设置为一个值。
3 css( properties )

设置一个键/值对象作为所有匹配元素的样式属性。
4 height( val )

设置每个匹配元素的 CSS 高。
5 height( )

获取当前计算的第一个匹配元素的像素，高。
6 innerHeight( )

获取第一个匹配元素的内部高(不包括边界，包括填充)。
7 innerWidth( )

获取第一个匹配元素的内部宽(不包括边界，包括填充)。
8 offset( )

获取第一个匹配元素的相对于文档的当前偏移量，以像素为单位。
9 offsetParent( )

返回一个 jQuery 集合以及第一个匹配元素的父元素的定位。
10 outerHeight( [margin] )

获取第一个匹配元素的外部高(默认包括边界和填充)。
11 outerWidth( [margin] )

获取第一个匹配元素的外部宽(默认包括边界和填充)。
12 position( )

获取一个元素相对于其父元素偏移量的顶端和左端的位置。
13 scrollLeft( val )

当传递进一个值时，所有匹配元素的滚动左偏移值就会被设置为传递进的那个值。
14 scrollLeft( )

获取第一个匹配元素的滚动左偏移值。
15 scrollTop( val )

当传递进一个值时，所有匹配元素的滚动顶偏移值就会被设置为传递进的那个值。
16 scrollTop( )

获取第一个匹配元素的滚动顶偏移值。
17 width( val )

为每个匹配元素设置 CSS 宽。
18 width( )

获取当前可计算的第一个匹配元素的宽，以像素为单位。
阅读全文
以上是编程学为你收集整理的css是什么意思 CSS全部内容。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
相关文章
猜您喜欢
标签TAG
本月热门
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部