构成结构：选择符（又称为选择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. Conemu, Msys2 工具整合，提升windows下控制台工作效率

    与windows cmd相比较git-bash这类的console工具好用很多,但是git-bash的命令和功能相对简单,功能扩展起来不方便,git-bash本身也是基于msys的. 昨天发现使用Ms ...

  2. Flask從入門到入土(五)——Flask与数据库

    import sqlite3 def init_db(): sql = 'create table user(id INT,name TEXT)' conn = sqlite3.connect(&qu ...

  3. HDU - 2187 贪心

    思路:  按照单价升序排序,依次买就行. AC代码 #include <cstdio> #include <cmath> #include <algorithm> ...

  4. WinSock WSAEventSelect 模型总结

    前言 本文配套代码:https://github.com/TTGuoying/WSAEventSelect-model 由于篇幅原因,本文假设你已经熟悉了利用Socket进行TCP/IP编程的基本原理 ...

  5. mysql varchar vs oracle varchar2

    1.错误提示: mysql的Data truncation: Data too long for column 'path' at row 1 错误原因: 1.字段过长而导致出错的, 2. 可能是因为 ...

  6. 深刻理解iosBlock

    深刻理解iosBlock ///一个控制器里的方法 - (void)setRefreshHeader { ACWeakSelf(self); self.tableView.mj_header = [M ...

  7. shell脚本基础1 概述及变量

    shell概述:在linux内核与用户之间的解释器程序通常指/bin/bash负责指向内核翻译及传达用户/程序指令相当于操作系统的"外壳" shell的使用方式:交互式--命令行: ...

  8. find命令 参数

    记一下我遇到过的: 中 !表示否定 -a 表示并且 -o  或者   perm注意权限模式,有无 -,单表含义不同,有-是表示属主.组.其他组权限对应(即某位为0时,表示不指定要匹配的权限,而不是没有 ...

  9. Davinci DM6446 Codec Engine双核通信环境的搭建

    根据前几篇文章,一个DM6446的系统已经架构完成.但是有很多人都喜欢TI的机制,毕竟双核软件开发对很多工程师来说是非常麻烦的事情,既然TI提供开发套件和开发包,那么直接做OEM就可以了,底层的东西不 ...

  10. yii学习笔记--使用gii快速创建控制器和模型

    配置gii 'gii'=>array( 'class'=>'system.gii.GiiModule', 'password'=>'123456',//使用gii的密码 // If ...