CSS用法简介

  CSS(Cascading Style Sheets层叠样式表)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

1.基本使用语法
    样式类别-方向-特征 : 值;
    设置颜色:
        color : red;
    设置字体大小
        font-size : 10px;
    字体描述
        text-decoration : overline;

2. CSS分类(如何使用CSS)
    行内样式
        直接给元素添加 style="" 属性
    内嵌样式
        直接给元素添加一个ID或一个class属性,在head标签中(不一定)写上
        <style type="text/css">
        </style>
        在里面写上样式的语法,并与对应的元素挂钩
    外部样式
        在htm文件外有一个css文件,样式写在css文件中,在html页中将这个样式文件加载进来
        <link href="css路径" rel="stylesheet" type="text/css" />

3.选择器(selecter)
    id选择器
        #id {
            /* 样式 */
        }
    类选择器
        .className {
            /* 样式 */
        }
    标签选择器
        tagName {
            /* 样式 */
        }
    三个样式同时使用,如果没有样式冲突,都应用
    如果有冲突,同级的就近原则
    如果不是同级的,ID>类>标签(专一的优先级最大)

 类选择器可以使用 class="c1 c2 c3 c4" 的语法将多个类选择器作用与元素上
    
    不规范用法:
        在CSS使用中,id选择器与类选择器可以同样的作用与多个元素
        id在规范中就是表示唯一,浏览器允许这么使用,但是在js执行中会出现问题

 复合选择器
        标签类选择器
            标签.类名 { /* 样式 */ }
        后面兄弟选择器
            选择器+* {
                /* 选中前面元素选择器的后一个元素 */
            }

    (+号不能省略)
        后代选择器
            将包含在某个元素中的元素都称为其后代
            <div id="dv1">
                <p>123</p>
                <div id="dv2">
                    <span id="span1"></span>
                </div>
                <p>456</p>
            </div>
            
            祖代选择器 后代选择器 {
                /* 样式 */
            }
         子代选择器
            父带选择器>子代选择器 {
                /* 样式 */
            }
         组合选择器
            选择器1, 选择器2, 选择器3, ..., 选择器N {
                /* 这些选择器的元素都具有这个样式 */
            }
            
4.常用样式
    文本
        color
        font-size
        font-family
        font-weight
    边框
        border-color
        border-style
        border-width
    背景
        background-color
    布局
        
    其他

时间: 2024-10-17 08:57:07

CSS用法简介的相关文章

压力测试工具tsung用法简介

tsung是用erlang开发的一款简单易用的压力测试工具,可以生成成千上万的用户模拟对服务器进行访问.目前对tsung的理解也仅限于会简单的应用,其内部结构没有深入研究过. 1.安装 tsung是用erlang编写的,所以首先安装erlang的运行环境.然后就是按照tsung的官网下载编译tsung.需要注意的是,生成测试报告需要gnuplot和perl的支持,其中perl需要安装Template扩展.具体安装过程请看相关手册或者google之. 2.配置文件 默认情况下,tsung会加载配置

display:table-cell的用法简介

display:table-cell的用法简介:display属性的使用相当频繁,比如display:block或者display:inline等,但是对于display:table-cell可能比较陌生,因为此属性在特定的情况下会发挥很大的作用,下面就简单介绍它的作用,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a

phpcms分页用法简介

PHPCMS分页的用法 前面需要有引用的list,代码如下: {pc:content action="lists" catid="11" order="id DESC" thumb="" moreinfo="" page="$page" num="4" cache="3600" } {loop $data $n $r} <li><

css012 css布局简介

css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的html代码数量应该尽可能减到最少,尤其是div标签的嵌套,当使用div标签有助于网页布局设计时,就很好用.但是并不是div嵌套的越多越好. 2.html5的分区元素 <div>  用于分割区域,块级元素 <span> 行内分区元素 <article> 给网页或者网页的分区提

Intent用法简介

Intent作为联系各Activity之间的纽带,其作用并不仅仅只限于简单的数据传递.通过其自带的属性,其实可以方便的完成很多较为复杂的操作.例如直接调用拨号功能.直接自动调用合适的程序打开不同类型的文件等等.诸如此类,都可以通过设置Intent属性来完成. Intent主要有以下四个重要属性,它们分别为:            Action:Action属性的值为一个字符串,它代表了系统中已经定义了一系列常用的动作.通过setAction()方法或在清单文件AndroidManifest.xm

Css3之高级-5 Css转换(简介、2D转换、3D转换)

一.转换简介 转换概述 - 转换是使元素改变形状.尺寸和位置的一种效果 - 又称为变形,即,可以向元素应用2D 或 3D 转换,从而对元素进行旋转.缩放.移动或倾斜 - 2D 转换: 使元素在 X轴 和 Y轴 平面上发生变化,改变其形状.尺寸和位置 - 3D 转换:元素还可以在 Z 轴上发生变化 转换属性 - transform 属性向元素应用 2D 或者 3D 转换 - 指定一组转换函数,取值 - transform: none/transform-function; - none - 默认值

qss(stylesheet)用法简介(一)

QPushButton按钮evilButton  { background-color: red } QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px; border-color: beige; } QPushButton#evilButton { background-color: red; border-style: outset; border-width: 2px

grep用法简介之二

上一篇文章总结了一些grep基本用法.在这次的内容里介绍grep和正则表达式结合使用的方法. 首先介绍下正则表达式,正则表达式非基本和扩展两种. 名词释义:正则表达式:正则表达式其实就是描述某些复杂规则字符串的代码集合. 元字符:在正则表达式中具有特殊意义的专用字符 正则表达式 基本正则表达式元字符: ^ :表示行首    $ :表示行尾      ^$:表示空白行      * :表示星之前字符的0个或任意个字符,例如:a*:表示0个a或任意一个a的字符,所以就是全显示出来了.      .

css的简介

昨天内容回顾    1.html的操作思想        ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化        *** <font size="5"></font>        2.图像标签        <img src="图片的路径"/>        ** 通过html访问本地图片,使用绝对路径,目前有问题        3.超链接标签        <a href=&qu