构成结构：选择符（又称为选择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. HTML5VEDIO标签阿里云-微信浏览器兼容性问题

    在网页展示媒体对象,离不开HTML5的 audio和video对象.但这两个目前来看兼容性方面还得关注一下. 目前在做一个阿里云下载video 并在微信端播放mp4格式的视频的时候,碰到了一些兼容性问 ...

  2. CentOS7关闭/开启防火墙出现 Unit iptables.service failed to load

    在vm中安装好tomcat,而且在liunx中使用nc命令可以返回成功,但是更换到window中访问不到tomcat的情况,是由于linux防火墙的问题造成的,传统的解决方式有2中 第一种解决方案: ...

  3. Hibernate学习（五）lazy属性学习（true和extra区别）

    Lazy(懒加载)在hibernate何处使用:1.<class>标签上,可以取值:true/false,(默认值是:true)2.<property>标签上,可以取值:tru ...

  4. javascript垃圾收集与性能问题

    一.垃圾收集 JavaScript具有自动垃圾收集功能,也就是说,执行环境会负责管理代码所占用的内存. 不同于C和类C语言,这些语言都需要手动监听内存的使用情况.JavaScript实现了自动管理内存 ...

  5. String不可变StringBuffer可变

    String是一个类,也可以表示字符串数据类型 String:是对象不是原始类型.为不可变对象,一旦被创建,就不能修改它的值.对于已经存在的String对象的修改都是重新创建一个新的对象,然后把新的值 ...

  6. hadoop/storm以及hive/hbase/pig区别整理

    STORM与HADOOP的比较 对于一堆时刻在增长的数据,如果要统计,可以采取什么方法呢? 等数据增长到一定程度的时候,跑一个统计程序进行统计.适用于实时性要求不高的场景.如将数据导到HDFS,再运行 ...

  7. 【前端】Vue和Vux开发WebApp日志四、增加命令行参数

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html 项目github地址:https://github.com/shamoyuu/vue- ...

  8. Disruptor3.0的实现细节

    本文旨在介绍Disruptor3.0的实现细节,首先从整体上描述了Disruptor3.0的核心类图,Disruptor3.0 DSL(领域专用语言)的实现类图,并以Disruptor官方列举的几大特 ...

  9. vxworks下硬盘测速程序

    void speed(int buflen,int mod){/*int mod = 0;*/ int len=50; FILE *fp; unsigned int i=0,j=0,tmp,tmp2; ...

  10. （三十二）虚拟机linux系统中安装firefox浏览器

    这几天,第二轮项目迭代进入了尾声,同时也接到了上司领导交代下来的新任务,那就是要我们学习linux系统基础的知识,包括常用命令和web应用的部署问题,于是乎安装了虚拟机和linux操作系统. 我安装的 ...