1.CSS规则由两部分构成，即选择器和声明器
声明必须放在{}中并且声明可以是一条或者多条
每条声明由一个属性和值构成，属性和值用冒号分开，每条语句用英文冒号分开

注意:
css的最后一条声明，用以结束的“;”可写可不写，但是基于W3c标准规范思考建议最后一条声明的结束“；”都要写上

2.行内样式
直接在style属性设置css样式style属性提供了一种改变所有的HTML元素样式的通用方法
语法:
<h1 style="color:red">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签设置样式</p>
3.内部样式
把css代码写在<head>的<style>标签中与HTMl内部位于同一个HTML文件中，这就是内部样式
4.外部样式
就是把css代码保存为一个单独样式表文件，文件扩展名位.class在页面引用外部样式即可
HTML文件外部样式有两种方式分别是链接式和导入式
1)链接式:
<head>
<link href="...css"rel="stylesheet"type="text/css"

</head>
rel="stylesheet"是指在本页面使用这个外部样式
type=text/css是指文件的类型是样式表文本
href="...css"文件所在位置
2)导入外部样式表
在HTML网页使用@import导入外部样式导入样式必须放在<style>标签中而<style>标签必须放在<head>标签中
<head>
<style>
@import url(".....css")
</style>
</head>
其中@import导入文件，前面必须放一个符号，url(".....css")表示样式文件位置
3)链接式和导入式区别
1.<link/>标签属于XHTML范畴中而@import是css2.1中特有的
2.使用，<link/>的链接css客户端浏览网页时先将css网页加载到网页中，在进行编译显示，所以这种情况下显示出的网页与用户预期的一样即使网速再慢也是一样的效果
3.使用@import导入css文件客户端在浏览网页时先将HTML结构呈现出来再把外部css文件加载到网页中当然最终与<link/>链接效果一样只是当网速较慢时会先显示没有css统一布局的
HTML网页，这样会给用户不好的感觉这也是目前大多数网站用连接外部样式表的主要原因
5.就近原则
行内元素>内部样式表>外部样式表
6.css3的选择器
标签选择器 类选择器 和id选择器
类选择器即<即标签名 class"类名称">标签内容</标签名>
1)类选择器
.green{

font-size:20px;
color:red;

}
<p class="green">hhhh</p>
2)id选择器
#green{

font-size:20px;
color:red;
}
<p id="green">hhhh</p>

注意:id选择器只能使用一次，也就是说在同一页面同一个id属性只能设置一次；而类选择器可以在页面使用多次

3)id选择器>class类选择器>标签选择器
7.css3高级选择器
1. 层次选择器
E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素中
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素仅位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且匹配的E元素后所有匹配的F元素

通用兄弟选择器选中的是E元素相邻的后面兄弟元素下，是一个或多个元素；
相邻兄弟选中的是与E元素仅挨的F元素，其中选中的仅是一个元素

8.结构伪类选择器

E：first-child 作为父元素的第一个子元素的元素E
E：last-child 作为父元素的最后一个子元素的元素E
E F：nth-child（n） 选择父级元素E 的第n个元素F（n可以是1/2/3）关键字为even odd
E:first-of-type 选择父级元素具有指定类型的第一个E元素
E:last-of-type 选择父级元素具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

E F：nth-child（n）和 E F:nth-of-type(n)使用时记住以下关键点
E F：nth-child（n）在父级里从第一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型再看位置

9.属性选择器
E[attr] 相匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素 并且属性值位val（其中Val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其中属性值以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其中属性值以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其中包含了"val"话句话说，字符串val与属性值中的任意位置相匹配

初始css的更多相关文章

  1. 初始CSS模板

    /*开始 初始CSS模板 开始*/ body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4 ...

  2. 初始css一

    初始CSS 一.form表单补充 form表单关键性的属性补充 form表单 关键性的属性 action 控制的是数据的提交路径 1.不写 默认是朝着当前页面所在的地址提交 2.全路径 3.后缀(/i ...

  3. HTML第四章：初始css

    CSS样式:                 一.为什么要使用CSS;可以让页面更美观.有利于开发速度.                 二.什么是CSS:全称cascading style shee ...

  4. 第四章 初始CSS

    一.引入样式 1.行内样式表 <h1 style="color: red;font-size: 18px;">10-30</h1> 2.内部样式表(在hea ...

  5. 初始化css代码需要注意的

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-06) 写在所有css代码之前,对网页中所有同类元素的一个样式规则代码或者一些基础性公用元素的样式规则代码. 1.空白 ...

  6. HTML的基础样式之CSS

    一.初始CSS 1.1.介绍CSS 1.CSS定义如何显示HTML元素. 2.当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 1.2.CSS语法 每个CSS样式由两个组成部分 ...

  7. 2.1.3- 体会css样式

    css初始 css样式规则 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  9. 移动端单页视图库，适用于制作移动Web touchbox

    ouchBox 原文:https://github.com/maxzhang/touchbox 移动端单页视图库,适用于制作移动专题 DEMO http://jsbin.com/vatuma/late ...

随机推荐

  1. 图像处理------基于Otsu阈值二值化

    一:基本原理 该方法是图像二值化处理常见方法之一,在Matlab与OpenCV中均有实现. Otsu Threshing方法是一种基于寻找合适阈值实现二值化的方法,其最重 要的部分是寻找图像二值化阈值 ...

  2. Codeforces Round #425 (Div. 2) D.Misha, Grisha and Underground

    我奇特的脑回路的做法就是 树链剖分 + 树状数组 树状数组是那种 区间修改,区间求和,还有回溯的 当我看到别人写的是lca,直接讨论时,感觉自己的智商收到了碾压... #include<cmat ...

  3. CF374 Journey

    技不如人甘拜下风 这题网上说法有 建反向边和先拓扑 都是为了每个点之前将其前驱都遍历到 #include<bits/stdc++.h> using namespace std; typed ...

  4. C#图解教程 第二十二章 异常

    异常 什么是异常try语句 处理异常 异常类catch 子句使用特定catch子句的示例catch子句段finally块为异常寻找处理程序更进一步搜索 一般法则搜索调用栈的示例 抛出异常不带异常对象的 ...

  5. PhotoShop制作简单的文字动画--多媒体技术与应用

    下面是最终实现的效果图: 1.新建图像,设置图像属性如下所示. 2.使用[横排文字工具]在背景图像上打上文字内容 3.[图层]——>[图层式样]——>[渐变叠加] 出现“图层样式”面板 4 ...

  6. 关于js的语句类型运算符等

    JavaScript的基本语句有以下几种: 1.for(判断条件){执行内容}: 2.if(条件){...}else{ ....}: 3.while(条件){....}:先判断条件再执行: do{.. ...

  7. 洛谷P2387 [NOI2014]魔法森林（LCT,Splay）

    在XZY&XZZ巨佬的引领下,一枚蒟蒻终于啃动了这道题...... 这次还是第一次写LCT维护边权,还要化边为点,思路乱七八糟的,写起来也不顺手,还好调了许久终于AC啦. 贪心排序按一个关键字 ...

  8. (luogu P3358)最长k可重区间集问题 [TPLY]

    最长k可重区间集问题 题目链接 https://www.luogu.org/problemnew/show/3358 做法 所有点向下一个点连容量为k费用为0的边 l和r连容量为1费用为区间长度的边 ...

  9. WC2006水管局长（加强）

    倒过来就变成了加边 然后就直接LCT # include <stdio.h> # include <stdlib.h> # include <iostream> # ...

  10. 【Webpack的使用指南 02】Webpack的常用解决方案

    说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 索引目录 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html- ...