构成结构：选择符（又称为选择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. 可拖动布局之Gridster

    看过bootstrap可视化布局系统的人是不是都会对页面元素的拖拽有着很大的兴趣?下面呢,楼主就给大家讲两个楼主知道的拖拽小插件吧. 一.gridster 1.了解gridster 后续官网:http ...

  2. Flex进度条

    Flex中,进度条的皮肤,以及使用Timer让它自动增加~ mxml中: <mx:ProgressBar id="proBar" verticalCenter="0 ...

  3. ubuntu python3.6 找不到_sqlite3

    sudo apt-get install libsqlite3-dev 然后重新编译python: sudo ./configure --with-ssl sudo make -j8 sudo mak ...

  4. Tcpdump安装使用

    本来想安装wireshark yum install wireshark  命令行下使用,包含抓包的基本功能 yum install wireshark-gnome  提供wireshark(UI)工 ...

  5. [微信JSSDK] 解决SDK注入权限验证 安卓正常，IOS出现config fail

    实测有效 解决微信游览器和企业微信游览器JSSDK注入权限验证 安卓正常,IOS出现config fail 一开始我们想到的是可能微信这边的Bug,但细想一下应该不是.因为可能涉及到了IOS的底层原理 ...

  6. css进行中打点效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. R+NLP︱text2vec包——BOW词袋模型做监督式情感标注案例（二,情感标注）

    要学的东西太多,无笔记不能学~~ 欢迎关注公众号,一起分享学习笔记,记录每一颗"贝壳"~ --------------------------- 在之前的开篇提到了text2vec ...

  8. MinGW下简单编译FFmpeg

    2009.03.21补充:ffmpeg-0.5正式发布,地址为:[url]http://www.ffmpeg.org/releases/ffmpeg-0.5.tar.bz2[/url].修改了第7步, ...

  9. python︱Anaconda安装、简介（安装报错问题解决、Jupyter Notebook）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 安装完anaconda,就相当于安装了Pyth ...

  10. javascript学习笔记01--javascript的基本介绍

    javascript 的基本介绍1,是用于web开发的脚本语言①脚本语言往往不能独立使用 它需要和html等配合使用②脚本语言有自己的变量,函数 控制语句③解释性语言/编译语言 脚本语言实际是解释性语 ...