Study 5 —— CSS概述

最新推荐文章于 2024-01-04 07:00:00 发布

weixin_30502157

最新推荐文章于 2024-01-04 07:00:00 发布

阅读量74

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/vurtne-lu/p/7975906.html

版权

CSS(Cascading Style Sheet)称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.css，
CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。
引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，对网页布局进行更多的控制。

CSS基础语法
CSS样式表由若干条样式规则组成，每条样式规则由三部分构成：
选择符(selector)、属性(property)和属性值(value),
基本格式如下：
selector{property: value;}

CSS样式表控制HTML5页面效果的方式通常包括行内样式、内嵌样式、链接样式和导入样式。
链接样式：
<link rel="stylesheet" type="text/css" href="1.css" />
（1）rel表示链接到样式表，值为stylesheet
（2）type表示样式表类型为CSS样式表
（3）href指定了CSS样式表文件的路径，此处表示当前路径下名称为1.css文件。此路径根据不同情况使用绝对路径和相对路径两种。
导入样式：
导入外部样式表是指在内嵌样式表的<style>标记中，使用@import导入一个外部的CSS文件，如：
<head>
    <style type="text/css">
    @import "1.css"
    </style>
</head>

优先级：
CSS样式表方式的优先级顺序由大到小依次是：行内样式、内嵌样式、链接样式、导入样式。

CSS选择器（选择符selector）
根据CSS选择器用途可以把选择器分为标记选择器、类选择器、全局选择器、ID选择器和伪类选择器等。
全局选择器
如果想要一个页面中所有HTML标记使用同一种样式，可以使用全局选择器，语法格式：
*{property: value;}
伪类
a:link         /*未访问的链接*/
a:visited      /*已访问的链接*/
a:hover        /*鼠标移动到链接上*/
a:active       /*选定的链接*/

结构伪类选择器

选择器                   含义
E:root                  匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)          匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)     匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)        与:nth-children()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)   与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
E:last-child            匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type         匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type          匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-type(1)
E:only-child            匹配父元素下仅有的一个子元素，等同于:first-child:last-child 或:nth-child(1):nth-last-child(1)
E:only-of-type          匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type 或:nth-of-type(1):nth-last-of-type(1)
E:empty                 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>结构伪类</title>
    <style>
        tr:nth-child(even){
            background-color: #f5fafe;
        }
        tr:last-child{
            font-size: 25px;
        }
        li:nth-child(3){
            color: red;
        }
    </style>
</head>
<body>
<table border="1" width="15%">
    <th>姓名</th><th>编号</th><th>性别</th>
    <tr><td>刘海松</td><td>006</td><td>男</td></tr>
    <tr><td>王峰</td><td>001</td><td>女</td></tr>
    <tr><td>李章立</td><td>006</td><td>男</td></tr>
    <tr><td>刘海松</td><td>006</td><td>男</td></tr>
</table>
<ul>
    <li>蔬菜</li>
    <li>水果</li>
    <li>鲜花</li>
    <li>饮料</li>
</ul>
</body>
</html>

UI元素状态伪类选择器
网页中，UI元素一般是指包含在form元素内的表单元素。
常用的状态伪类选择器
选择器          说明

E:enabled      选择匹配E的所有可用UI元素，匹配<input type="text">
E:disabled     选择匹配E的所有不可用UI元素,匹配<input type="button" disabled="disabled">
E:checked      选择匹配E的所有可用UI元素,匹配<input type="checkbox" checked="checked">

实例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        input:enabled{
            border: 1px dotted #666; background: #ff9900;
        }
        input:disabled{
            border: 1px dotted #999; background: #f2f2f2;
        }
    </style>
</head>
<body>
<div style="text-align: center">
    <h3>Login</h3>
    <form method="post" action="">
        <p>username: <input type="text" name="username"></p>
        <p>password: <input type="password" name="passwd" disabled="disabled"></p>
        <p>
            <input type="submit" value="submit">
            <input type="reset" value="reset">
        </p>
    </form>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/vurtne-lu/p/7975906.html

weixin_30502157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Study 5 —— CSS概述

CSS(Cascading Style Sheet)称为层叠样式表，也可以称为CSS样式表或样式表，其文件扩展名为.css，CSS是用于增强或控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开，对网页布局进行更多的控制。CSS基础语法CSS样式表由若干条样式规则组成，每条样式规则由三部分构成：选择符(selector)、属...
复制链接

扫一扫