CSS之级联样式单与CSS选择器

级联样式单与CSS选择器

CSS(Cascading Style Sheet)为级联样式单,也称为层叠样式单,主要用于网页风格设计,包括字体大小、颜色、以及元素的精准定位等。一般推荐把页面外观交给CSS去控制,而HTML标签则负责标签和语义部分。对应于前端程序员来说,必须同时掌握HTML5和CSS的相关知识。

一.CSS样式单的基本使用

一共有四种使用样式单的方法:链接外部样式文件、导入外部样式文件、使用内部样式定义、使用行内样式。

1.链接外部样式文件:

在元素中添加 以下代码。

 <link rel="stylesheet" href="xxx.css"/>

xxx.css是CSS样式单文件的地址,可以是相对地址,也可以是绝对地址.

2.导入外部样式文件:

需要在<style…/>元素中使用@import来导入。有如下两种:@import "xxx.css"或者@import url(“xxx.css”)。除了在html文件中有用到之外,也可以在css中导入。一般用于在css文件导入居多。

3.使用内部样式定义:

 <style type="xxx/css">
 样式单文件定义
 </style>

好处是可以实现css样式仅对某一个页面有效,而不会影响整个站点。

4.使用行内样式

<div style=" float: left;
    margin-left: 20px;
    margin-top:15px;
    color:rgb(165, 41, 31);">

可以在每一个元素后面添加一个style通用属性。

二.CSS选择器

定义CSS样式的语法格式如下。分为两个部分:Selector选择器和{…}属性的定义

Selector{
    property1:value1;
    property2:value2;
    ....
}

1.常用的一些选择器

  • 元素选择器 E{…}

  • 属性选择器

div[id*=xx]{
            background-color:red;
            }
div[id^=xx]{
            background-color: #555;
            color: #fff;
        }
div[id~=xx]{
   		   color: #fff;
        }
  • ID选择器 #E{…}
  • class选择器 .E{…}
    包含选择器 Selector1 +空格 +Selector2{…} (只要是中间加空格的选择器都是包含选择器,不考虑有多少后代。即使是孙子元素也可以) 只要包含就行,不用体现具体的关系
  • 子选择器 Selector1>Selector2{…} 要求目标选择器必须是外部选择器对应的元素的直接子元素。
  • 新增的兄弟选择器 Selector1~Selector2{…} 兄弟选择器匹配与Selector1对应的元素后面、能匹配 Selector2的兄弟节点。只往下找。
  • 选择器组合 Selector1,Selector2,Selector3…{…} 中间用逗号隔开

补充:p+空格+.lst和p+.lst表示不同的含义。前者为包含选择器,指的是p标签下,后代中class为lst的元素。后者指的是p标签中,class为lst的元素。

2.伪元素选择器

:first-letter:针对对象的第一个字符
:first-line:针对对象的第一个行
以上两种只针对块级元素起作用,对行内元素span等使用之前必须设置行宽或position:absolute或display:block;
:before;:after 都是对原有内容基础上插入内容。选择器后面为{content:xxxx;url:xxx;}

3.新增的伪类选择器:

结构性伪类选择器:
Selector:first-child()
Selector:last-child
Selector:nth-child(n)
Selector:nth-last-child(n) 倒数第n个子节点的元素
Selector:only-child 必须是其父元素的唯一子节点的元素
Selector:nth-of-type(n) 要求是与选择器同类型、同级的兄弟元素中的第n个元素

UI元素状态伪类选择器:
Selector:visited 匹配选择器且未被访问前的元素
Selector:visited 匹配选择器且已被访问过的元素
Selector:active 匹配选择器且处于被用户激活的元素的状态(在鼠标点击和释放之间的状态)
Selector:hover 匹配选择器且处于鼠标悬停状态的元素
Selector:focus 匹配选择器且已得到焦点的元素
Selector:enabled 匹配选择器且处于可用状态的元素
Selector:disabled 匹配选择器且处于不可用状态的元素
Selector:checked 匹配选择器且处于选中状态的元素
Selector:defaul 匹配选择器且页面打开时处于选中状态的元素

其他伪类选择器:
Selector:target 匹配选择器且必须时命名锚点目标的元素
Selector1:not(Selector2) 匹配Selector1选择器但不符合Selector2的元素。相当于Selector1减去Selector2,可以连着写几个not选择器。

三.在脚本中修改显示样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="text/html">
    <title>随机改变背景色</title>
    <script type="text/javascript">
        function changeBg(){
           //将背景色定义成空字符串
           var bgColor="";//定义变量
           for(var i=0;i<6;i++){
               bgColor +="" +Math.round(Math.random()*9);//round四舍五入,random随机数为0到1
           } //将随机生成的背景色赋给页面的背景色
           document.body.style.backgroundColor="#" +bgColor;
        }//同document.getElementById("xxx")....
        document.onclick=changeBg;//函数调用,不用括号,有括号表示值赋给onclick 
    </script>
</head>
<body>
</body>
</html>

以上代码为随机改变页面背景色的示例代码

发布了1 篇原创文章 · 获赞 0 · 访问量 31
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览