构成结构：选择符（又称为选择qi器）｛声明（属性：值）；｝*****注意：大括号，冒号，每个声明后的分号。

注释：/*注释内容写在这里*/

一。css样式

css样式写的地方的不同分类：内联式、嵌入式、外部式

内联式：<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里，不能写在截至标签中*****注意：=“”双引号的存在，引号中的冒号存在。

嵌入式：<style type = "text/css">

span

{

color:red;

}

</sytel>*****注意：span没有后部标签，是单标签。但是在后边标注过程中的span是存在后标签的、

外部式：<link href="base.css" rel="stylesheet" type="text/css" />

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。但不在<style>标签内部。

*****头文件中用span标签来实现。

三种css样式的优先级：内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。

二。选择器

标签选择器：例子

p{font-size:12px;line-height:1.6em;}*****注释（字号；行间距）
类选择器：.（英文圆点开头注意
类选器名称{css样式代码;}
用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>（这个时候类的名称前不加英文圆点）
ID选择器：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
ID选择器和类选择器的异同：
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。（在class后边用空格分开所选择的类选择器，使其具有不同的设置）我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
子选择器：
选择指定标签元素的第一代子元素（只对第一代子元素有作用，对第二代无效）。如下示例：
.food>li{border:1px solid red;}
包含（后代）选择器：
加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
.first span{color:red;}
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器：
使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下举例使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
伪类选择器：
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
 其他标签存在不兼容问题，故不在此列出。
分组选择符：
分组选择符（，）h1,span{color:red;}
*****注释：选择器下部的标签选择，中间用空格隔开即可
3.css的继承，层叠和特殊性
继承：
允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
border:1px solid red;此样式不具有继承性质
边框为1像素、红色、实心边框线，
特殊性：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。权值越高的选用其格式。
层叠性：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
就近原则的应用
重要性：
有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
p{color:red!important;}
*****注意：!important要写在分号的前面
*****注释：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
 
 

css学习の第一弹—格式创建的更多相关文章

  1. Office宏病毒学习第一弹--恶意的Excel 4.0宏

    Office宏病毒学习第一弹--恶意的Excel 4.0宏 前言 参考:https://outflank.nl/blog/2018/10/06/old-school-evil-excel-4-0-ma ...

  2. Python3 学习第一弹：基本数据类型

    本人学习主要从<python基础教程第二版>,<dive into python3>等书籍,及一些网上大牛的博客中学习特别是Python官方文档<Python Tutor ...

  3. css学习の第一四弹—代码格式简写归纳

    一.代码简写方式归纳 >>1.盒模型代码简写: 外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左 1.如果t ...

  4. html学习第一弹の常用标签的归类

    HTML初步学习: 行内元素:只占据他对应标签的边框所包含的空间,默认横向排布. 块级元素:块级元素占据其父元素(容器)的整个空间,因此创建了一个块,通常浏览器会在块级元素前后另起一行,默认竖向排布. ...

  5. Python学习第一弹——Python环境搭建

    一.Python简介: Python,是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年.Python语法简洁而清晰,具有 ...

  6. WebService学习-第一弹

    一:WebService简介(1)简介----百度百科(注意标识的重点) Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言 ...

  7. Git速成学习第一课：创建版本库与版本回退

    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 我太困了0.0精神点再写...... /*我来啦!以后会陆续更新自己的学习笔记*/ Git是分布 ...

  8. CSS 学习第一天

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2:样式值2"> 2.内联:在head标签中添加& ...

  9. Laravel学习第一天（创建laravel项目、路由、视图、blade模板）

    创建laravel项目 composer create-project laravel/laravel learnlv 4.1.* 查看帮助:composer create-project    使用 ...

随机推荐

  1. Java经典编程题50道之三十

    有一个已经排好序的数组.现输入一个数,要求按原来的规律将它插入数组中. public class Example30 {    public static void main(String[] arg ...

  2. Redis Sentinel 高可用服务搭建

    阅读目录: 关于 Redis 的概念 关于 Redis Sentinel 的概念 搭建 Redis Server(master) 搭建 Redis Server(slave) 搭建 Redis Sen ...

  3. C语言_结构体的4种定义初始化方式及案例

    结构体是一种构造数据类型 (构造数据类型:数组类型.结构体类型(struct).共用体类型(union)).用途:把不同类型的数据组合成一个整体,通俗讲就像是打包封装,把一些有共同特征(比如同属于某一 ...

  4. 关于MYCAT 读写分离,与只读事务的问题.

    习惯性为了复用mysql连接,喜欢加上@Transactional(readOnly = true) 只读事务,很多零碎的查询下,速度会快一些,也环保一些. 最近用mycat做了读写分离,其中一个查询 ...

  5. MongoDB,子查询

    //1.从sub(订单明细)对订单号分组,查询最多子订单的单号一条数据,重命名orderNo字段为num//2.根据这个sub.num(从结果集里获取第一条结果),查询main(主档表) db.mai ...

  6. php的filesystem基本函数的学习（1）

    1.basename basename — 返回路径中的文件名部分 string basename ( string $path [, string $suffix ] ) 给出一个包含有指向一个文件 ...

  7. FFmpeg-音频和视频应用程序的瑞士军刀

    FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库l ...

  8. Davinci DM6446开发攻略——LINUX GPIO驱动源码移植

    一.             DM6446 GPIO的介绍      说到LINUX 驱动移植,没有移植过的朋友,或刚刚进入LINUX领域的朋友,最好去看看<LINUX 设备驱动程序>第三 ...

  9. Hi3531 SDK v2.0.8.0 安装

    1.Hi3531 SDK包位置 在"Hi3531_V100R001***/01.software/board"目录下,您可以看到一个 Hi3531_SDK_Vx.x.x.x.tgz ...

  10. PCI9054 突发模式数据传输 (burst mode data transfer )

    C mode target slave , 之前看PCI9054 datasheet知道这个burst mode ,也看了时序图,但是一直缺乏一个感性的认识. 今天网上买的 USB逻辑分析仪到货了,接 ...