标签：:link bsp class str 边框 特定 bottom weight 引入
1.CSS：CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表，CSS是配合HTML的，HTML主要负责页面的结构，CSS主要负责页面的美化
2.CSS基本语法：css的定义方法是 ：选择器 { 属性：值； 属性：值； 属性：值；} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略
eg:div{
width:100px;
height:100px;
background:gold;
}
3.css引入方式：css引入页面的方式有三种
内联式：通过标签的style属性，在标签上直接写样式，一般写在<head>标签里面
eg:<div style="width:100px; height:100px; background:red ">......</div>
嵌入式：通过style标签，在网页上创建嵌入的样式表
eg:<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>
外链式：通过link标签，链接外部样式文件到页面中，即在外面新建一个css文件夹，然后在<head>标签中通过<link rel="stylesheet" href="css.css" />链接过来，不要写在<style></style>对标签中，用外部链接式写css不需要用到style对标签
eg:<link rel="stylesheet" type="text/css" href="css/main.css">
4. css选择器:根据获取页面中元素的不同，目前css选择器主要分为五类：基本选择器，组合选择器，伪类选择器，伪元素和属性选择器。
基本选择器 ： 基本选择器主要分为标签选择器，类选择器，ID选择器和通配选择器
（1）标签选择器是css中使用率最高的一类选择器，它直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中的显示样式。因此标签选择器可以快速，方便的控制页面标签的默认显示效果
（2）类选择器是以（.）前缀开头，然后跟随一个自定义的类名，对应于html中的class属性， 类选择器允许以一种独立于文档元素的方式来指定样式,该选择器可以单独使用，也可以与其他元素结合使用（如果把标签和类结合在一起来定义选择器，则可以限定类的使用范围，这样就可以指定该类仅适用于特定的标签范围内，这种做法也称为指定类选择器）
（3）ID选择器，是以（#）前缀开头，然后跟随一个自定义的ID名，对应于HTML中的ID属性（一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML框架元素的ID值都是唯一的）
（4）通配选择器，如果HTML所有元素都需要定义相同的样式，这时可选择通配选择器，通配选择器是固定的，用星号（*）表示
组合选择器：当把两个或者多个基本选择器组合在一起时，便形成了一个复杂的选择器，通过组合选择器可以精确匹配页面元素。主要包括：包含选择器，子选择器，相邻选择器，兄弟选择器，分组选择器。
（1）包含选择器：包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器
（2）子选择器：指定父元素所包含的子元素。子选择器使用尖角号(>)表示，子选择器只传给儿子，孙子和其他堂亲都不行
（3）相邻选择器：通过（+）分隔符进行定义，前后选择符的关系是兄弟关系。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻选择器
（4）兄弟选择器：通过（~）分隔符进行定义，其基本结构是第一选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素，前后选择符的关系是兄弟关系。简言之，就是查找某一个指定元素的后面的所有兄弟结点，而相邻选择器只能查找紧接的那一个兄弟结点
（5）分组选择器：通过（，）分隔符进行定义，其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素全部都取出来，通过分组选择器可以实现集体声明，将样式表中一致的css样式放在一起，然后通过逗号连接这些选择器，减少代码的书写量
属性选择器：属性选择器可以根据元素的属性及属性值来选择元素
伪类选择器：伪类选择器用于向某些选择器添加特殊的效果,包含伪类和伪对象选择器，伪选择器以冒号（：）作为前缀标识符，冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格，否则将错认为类选择器。伪类选择器主要包括4种：动态伪类，结构伪类，否定伪类和状态伪类
（1）动态伪类：动态伪类是行为类样式，这些伪类并不存在于HTML中，只有当用户与页面交互时才能体现出来，动态伪类选择器包含两种形式：一种是锚点伪类，这是在链接中常见的样式，如:link，:visited；另一种是行为伪类，也称为用户操作伪类，如:hover,:active,:focus
（2）结构伪类：它是通过文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更加简洁
（3）否定伪类：:not()表示否定选择器，即排除或者过滤掉特定元素。前面的选择器都是匹配操作，而:not()操作相反，它表示过滤操作
（4）状态伪类：状态伪类主要针对表单进行设计的，由于表单是UI设计的灵魂，UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。eg: :enabled, :disabled, :checked
（5）目标伪类：目标伪类选择器形式eg: E:target，它表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能有效。
5.基本CSS属性： 背景，文本，字体，尺寸，边距和填充，边框
background (背景)
Text(文本）
Font
Dimension
Margin&Padding
Margin
Padding
Border
6.div+css 布局
div和span
div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式
div和span的区别在与，span是内连元素，div是块级元素
盒模型
div+css对网页进行布局
首先在页面整体上进行div标签划分内容区域，然后再用css进行定位，最后再对相应的区域添加内容
（1）用div将页面划分
拿到网站页面图后，首先将分析页面分为哪几块,然后用div划分出各个内容区域，一般页面有页面顶部、轮播图、主体内容、菜单主导航、页面底部几个部分构成，每个部分分别由自己的id来标识
（2）设计各内容块的位置
页面内容确定后，则需要根据内容本身去考虑页面的版型，例如菜单、双栏、左右中等内容块，确定后就可以使用css直接定位了
（3）用css定位
把页面框架确定后就可以css对各个设计的内容块进行定位，然后对各个块进行整体规划，最后再添加内容
用css的没接查询，使用@media 的三种方式
（1）直接在CSS文件中使用
@media 类型 and (条件1) and (条件二)
{
css样式
}
@media screen and (max-width:980px ) {
body{
}
}
（2）：使用@import导入
@import url("css/moxie.css") all and (max-width:980px);
（3）使用link连接，media属性用于设置查询方式（最常用的）
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可
标签：:link bsp class str 边框 特定 bottom weight 引入
原文地址：https://www.cnblogs.com/keeye/p/12539127.html
