CSS基本知识
Posted codingbear
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基本知识相关的知识，希望对你有一定的参考价值。
1.CSS简介【了解】
1.1cascading style sheets 层叠样式表
- 层叠：一层一层
- 样式：格式，更多更丰富
CSS 就是为html服务的。
1.2CSS目的
- 样式更多
- 使用CSS，可以实现样式和页面的分离，降耦合
HTML专注于做页面的开发，CSS 专注于做样式的开发。
2.CSS与Html结合(集成)使用【重点】
三种主要结合方式：
- style属性，所有的HTML标签都有一个style的属性
<div style="color:red"/>
- 在head 里面写一个样式的脚本
<head> <style type="text/css"> div color:blue </style> </head>
- 引入外部的CSS文件
<link rel="stylesheet" type="text/css" src="css的路径"></link>
3种结合方式优先级：方式1>方式2>方式3
CSS的样式优先级是从内到外,执行顺序是从上到下。
3.CSS的选择器【了解+重要】
3.1基本选择器【重要】
以下面这段代码为例：
<div id="huge1" name="xxxx" class="hugeclass"> <p>我刚才喜欢胡歌，现在不怎么喜欢，喜欢的人太多了</p> <div id="huge2"></div> </div> <div id="huge3" class="hugeclass2"> 很多很多内容 </div>
- 标签选择器：标签
<!--样式是以分号结尾的,属性有： border: 边框 line_width|line_style|color 第一个是边框的宽度，第二个就是边框：实线，虚线 color:边框的颜色 margin:外边距 分上右下左（顺时针） pading:内边距 --> <style> div border:1px solid red; </style>
- id选择器 :#id 根据id来选取
<style> #huge1 color:red; border:1px solid black; </style>
- 类选择器 :.class
<style> .hugeclass border:1px solid blue; </style>
选择器的优先级：id >class>标签
CSS：层叠样式表
样式是一层一层
多个样式指向同一个标签，样式会叠起来，但是叠的顺序就是id ,class,标签
3.2组合选择器【了解】
- 多元素选择器 ：div,font
- 后代选择器：A B B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
- 子代选择器 :div > p
- 相邻兄弟选择器: div +p
- 兄弟选择器 : div ~ p
3.3属性选择器【了解】
标准的格式 div[]
- div[name] :有name属性就选择
- div[name="xx"] :有属性且属性值为xx，就选择
- div[name包含x]：name属性包含x，就选择
- div[属性以xx开头]：属性以xx开头，就选择
- div[属性以xx结尾]：属性以xx结尾，就选择
3.4伪类选择器【了解】 a:伪类
一个超链接点击以后，要给它变一个颜色。
超链接的伪类选择器：
未点击 ->放到超链接上-> 点击-> 链接完成
:link-> :hover-> :active-> :visited
<style> a:visited color:red; </style>
4.CSS的盒子模型【最重要】
只需要改变盒子模型的值（CSS）就OK了，而css是一个分离的文件，这样设计一个页面j就很简单。
以上是关于CSS基本知识的主要内容，如果未能解决你的问题，请参考以下文章