构成结构：选择符（又称为选择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. ListIterator的使用

    package cn.lonecloud.Iterator; import java.util.ArrayList; import java.util.ListIterator; public cla ...

  2. java6 - 面向对象编程思想

    一.学习大纲: 1. 类的理解:对现实事物的抽象表示 2. 行为与特征的理解:在类抽象过程中,通常把行为抽象成方法,把特征抽象成属性 3. 对象的理解:类的一个实例即是对象 4. Object 根类 ...

  3. wamp server环境下mysql数据库的密码为什么修改不了？

    每次这个控制台,不输入密码可以直接用,用root登录都登录不了.修改root密码也修改不了.困惑? 经过不断的尝试终于找到解决的办法: 1,在mysql的配置文件my.ini的末尾添加 skip-gr ...

  4. Git版本控制的基本命令

    安装完了GIT首先要自报家门,否则代码不能提交 git config --global user.name "Your Name" git config --global user ...

  5. PHP安全、Sql防注入安全汇总

    利用Mysqli和PDO 产生原因 主要就是一些数据没有经过严格的验证,然后直接拼接 SQL 去查询.导致漏洞产生,比如: $id = $_GET['id']; $sql = "SELECT ...

  6. Centos下的GitLab的安装汉化和数据备份以及管理员密码重置

    前言: 安装版本:gitlab-ce-8.8.5-ce.1.el7.x86_64.rpm 下载地址: https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yu ...

  7. UVA 816 bfs

    算法入门经典上面的题.题目链接 uva816 大致题意 有一个最多包含9*9个交叉点的迷宫.输入起点.离开起点时的朝向和终点,求一条最短路(多解时任意输出一个即可).详细题意请看原题 思路 其实就是b ...

  8. python-scrapy的编码问题

    在学习scrapy中,遇到编码问题还是很头痛的问题的.由于对于语言的对不熟悉,加上不会思考的去解决问题.这样盲目的实践似乎就是在浪费时间. 用心思考一下是非常重要的一个过程,在没有办法前进的时候,先学 ...

  9. 微信企业号JS-SDK选择图片、上传图片

    因公司项目需要,要修改一个手机端上传图片的一个功能,原本的项目用的是input 的file控件上传的,虽然标注了可以多选,但是在实际运用当中只有iOS手机可以实现多选,Android手机并不支持多选, ...

  10. HDFS读写过程

    HDFS的读写过程: 读过程: Client收到用户的读请求——client拿着path向namenode请求文件或者block的datanode列表——client从返回的datanode列表中选择 ...