Css 分类 属性 选择器

Css 层叠样式表 美化页面的小工具

分类:

  内联 (行内)在标签内部以属性的形式呈现,属性名style

内嵌 head标签内以标签形式呈现,标签名style

外部 head标签内 加link标签 引入外部文件 *.css

<link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />

link标签

  插入icon图标(加icon图标,路径必须绝对路径)

<link rel="shortcut icon" href="xxx.ico" type="image/x-icon"/>

icon图标

选择器:

  用来找元素,将样式用在标签上。

    标签选择器 .div{}

    id选择器 #id{}

    class选择器.class{}

    并列(加逗号)选择器1,选择器2

    父子(加空格)父选择器  子选择器

       *{}全页面

属性:

  文本:

    text-decoration 文本修饰  (下划线什么的)

    text-indent   缩进

    text-shadow 阴影 1px(水平阴影的位置)1px(垂直) 1px(模糊的距离) # (阴影颜色)

    text-weight字体加粗

    em表一个字大小

  背景:

    background-position: 属性 定义div内图片在div的位置  可以写两个值左右上下

<head>
    <style>
        #div{
        width:100%;
        height:111px;
        background-image:url();
            background-position:34% 0
        }
    </style>
</head>

<body>
    <div id="div"></div>
</body>        

bg-position

    

    background-size            图片大小 等比缩放

    background:颜色 图片 平铺 位置 大小

总结问题:

  1.text-indent 缩进属性,只能用在块标签上,span之类的行标签不能用

    解决办法:给span加display:inline-block;属性,变为行内块标签。

  2.大div套小div,若父div不设宽高,则他会随着子div的位置移动而改变。

    如margin float属性,写在子div,父div也会移动。

    解决办法:给父div设置边框或定义宽高。

  3.改变<hr/>的颜色

  <hr style="background-color:#ECECEC; border:none; height:1px;" />

  取消边框,设背景色 设高。

原文地址:https://www.cnblogs.com/SSs1995/p/8552545.html

时间: 2024-10-29 19:11:11

Css 分类 属性 选择器的相关文章

CSS:属性选择器

本文介绍css中属性选择器的基本用法:为具备指定属性的标签设置样式. 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equi

css的属性选择器中属性值是区分大小写的。

以前经常看到很多人说"css中通常只有class和id的值区分大小写,属性名和属性值不区分大小写" BLAH BLAH 接手别人项目的时候排了半天bug发现:css的属性选择器对于属性值确实是区分大小写的,而对于属性名却大小写不敏感. 最开始是在querySelectorAll中发现的,测试后发现css中也具有一致的表现. 所以对于过去的那些说法,其实已经不适用于现在的场合了. 测试环境:Chrome 66 , Firefox 57. 另外附上使属性值不区分大小写的写法:https:/

CSS 3 属性选择器

CSS 3  选择器 ========================================================================================= 属性选择器 ========================================================================================= [属性名^=值]--[href^="#"]----选择以#开头的所有href元素 [属性名$=值

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&

css基础 属性选择器 属性值以指定字符开头 / 结束

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 属性选择器 选择带有title属性的a标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css 属性选择器笔记

1.基本选择器: eg: *{margin:0;padding:0} p{color:black} .content{background:red;} #intro{padding-left:2em;} 2.多元素组合选择器 div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } h2 + p { color:#f00; } 三.CSS

css的各种选择器

一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素 二.多元素的组合选择器 5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 7. E > F 子元素选择器,匹配所有E元素的子元素F

CSS 属性选择器(八)

一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属性名 [class]{color:red} 作用于任何带有class属性的元素,不管理class的值是什么,也可以是其它元素的所有合法属性如: img[alt]{border:none}; 上面这个会作用于所有带有alt属性的img元素 a[href][title]{font-weight:bold};作用于