【web前端】CSS基础

来源：互联网发布：大米评测淘宝店编辑：程序博客网时间：2024/05/26 15:59

css很简单，但是离灵活应用还是有一定距离的，今天先查漏补缺放个小总结

1. padding（内边距）的设置

Padding-top、right、bottom、left

内边距都为5px时，padding：5px

2. Border-width（边框）

border-top-width、right、bottom、left

边框都为5px时，padding：Border-width：px

3. （margin）外边距

Margin-top、right、bottom、left

外边距都为5px时，margin：5px

4. css主要有三种使用方式：

1）内部样式：比较少用，相当于把外部样式嵌入到了HTML的<head></head>之间去了

在html文档的<style>标签中中写css样式，格式：

              <type>                     //css代码                     body{background-color:red;}              </type>

2）外部样式：较为常用，最方便。就是把css单独作为一个文件，便于管理，并且可以将多个HTML文档关联到一个css上，使得批量管理更为方便。

在html文档中用<link>标签，引用外部css文件，格式：

                  <link rel="icon"href="./assets/default/img/title.ico" />                  <link rel="stylesheet"type="text/css" href="./css/bootstrap.min.css">                  （<linkhref="./css/bootstrap.min.css">）

3）行内样式：适用于css文档比较小时

在标签中使用，使用style属性控制当前标签的显示效果

                 <div style="color:red;"></div>

5. css的jQuery使用

1）设置样式

$("#delRoot").css('display',"none");

2）Jquery css函数用法(判断标签是否拥有某属性)

判断一个层是否隐藏:

$("#id").css("display")=="none" ;

在所有匹配的元素中，设置一个样式属性的值:

$("p").css("color","red");

把一个“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式

$("p").css({ color: "#ff0011", background: "blue" });

如果属性名包含 "-"的话，必须使用引号:

$("p").css({ "margin-left": "10px", "background-color": "blue" });

1 0