css (层叠样式表) : 对html标签的渲染和布局

  1. 查找 (选择器)
  2. 操作标签 (属性操作)

导入用 link 标签,后面的href就用你的文件路径就好

写css文件,要单独写到一个文件里面去

推荐 : 链接式

1. 行内式 :
    <p style='background-color: black'>hello doubi </p>

2. 嵌入式 : 嵌入式是将CSS样式几种写在网页的<head></head>标签对的<style></style>标签对中.  格式如下:
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3. 链接式 : 将一个.CSS文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>

二. css的选择器(Selector)

'选择器'指明了{}中的'样式'的作用对象,也就是'样式'作用于网页中的哪些元素.

一 .基本选择器

    标签选择器 : p{}
    id选择器 : #i1{}
    class选择器 : .c1{}  !!!常用
    统配选择器 : *{}   

二 .组合选择器

后代选择器
.c2 p{
    color : red;
    }
所有属于c2类后代的p标签都使用这个样式.   用 空格

子代选择器
.c2>p{
    color : red;
    }
所有属于c2类的子元素p标签适用. 只适用子元素,孙子元素不能用,兄弟元素也不行.     用>.

毗(pi)邻选择器 :
    .c2+p{
        color : red;
        }
紧随.c2之后的所有同级p标签. 用+.

兄弟选择器 :
.c2~p

##标签嵌套 : 块级元素可以嵌套内联元素或者某些块级元素.但!!!内联元素不可以嵌套块级元素,它只能包含其他内联元素.  再注意 : p标签不可以包含块级元素.

三 .属性选择器 :
    E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

    E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }

    E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                    td[class~=”name”] { color:#f00; }

    E[attr^=val]    匹配属性值以指定值开头的每个元素
                    div[class^="test"]{background:#ffff00;}

    E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}

    E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

四 .选择器的优先级 :
    继承是css的一个主要特征,依赖于祖先>后代的关系.
    !!! 任何显示申明的规则都可以覆盖其继承样式。　
    !!! 有一些属性不能被继承，如：border, margin, padding, background等。

    ###CSS的优先级 :
        所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

    样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

    1 内联样式表的权值最高               style=""－－－1000；

    2 统计选择符中的ID属性个数。       #id －－－100

    3 统计选择符中的CLASS属性个数。 .class －－－10

    4 统计选择符中的HTML标签名个数。 p －－－1

    按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

前端之 CSS🤖的更多相关文章

  1. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  5. 第二篇：web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  6. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  7. 前端基础——css

    前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  10. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

随机推荐

  1. mysql事务使用 超简单

    MySQL的事务支持不是绑定在MySQL服务器本身,而是与存储引擎相关1.MyISAM:不支持事务,用于只读程序提高性能 2.InnoDB:支持ACID事务.行级锁.并发 3.Berkeley DB: ...

  2. The authenticity of host 'github.com (192.30.253.113)' can't be established.

    在初始化git之后(git init),同时在github建立好仓库之后,本地也新增了ssh kye(ssh-keygen -t rsa -C 'mail address'),同时也在本地新增了远程仓 ...

  3. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十七节--Quartz与ABP框架Abp.Quartz及扩展

    ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...

  4. PDFBox创建并打印PDF文件, 以及缩放问题的处理.

    PDFBox带了一些很方便的API, 可以直接创建 读取 编辑 打印PDF文件. 创建PDF文件 public static byte[] createHelloPDF() { ByteArrayOu ...

  5. 被动式Telnet研究及实现(解决内外网远程维护的困难)-part A

    欢迎转载.转载请保留原文链接:http://blog.csdn.net/mikulee/article/details/40149779 项目背景及需求: 近期公司有一个项目: 我们在一个arm主机上 ...

  6. ShuffleNet总结

    在2017年末,Face++发了一篇论文ShuffleNet: An Extremely Efficient Convolutional Neural Network for Mobile Devic ...

  7. 十一、Spring Boot 集成Shiro和CAS

    1.Shiro 是什么?怎么用? 2.Cas 是什么?怎么用? 3.最好有spring基础 首先看一下下面这张图: 第一个流程是单纯使用Shiro的流程. 第二个流程是单纯使用Cas的流程. 第三个图 ...

  8. 自学Zabbix3.7.2-事件Event-来源与分类

    一.zabbix 事件从字面理解,就是发生了一个事情就算是一个事件.就在trigger的文章内,我们已经有用到事件,这个事件要讲概念真心不知道怎么说,就拿trigger事件来说,如果trigger从当 ...

  9. 关于python的itertools模块

    这是一个强大的模块 先来看一下它都有什么工具 无穷循环器 迭代器         参数         结果                                               ...

  10. 《Spark大数据处理：技术、应用与性能优化》【PDF】 下载

    内容简介 <Spark大数据处理:技术.应用与性能优化>根据最新技术版本,系统.全面.详细讲解Spark的各项功能使用.原理机制.技术细节.应用方法.性能优化,以及BDAS生态系统的相关技 ...