css概念及作用
css即层叠样式表的英文缩写
作用：1 渲染页面 2 页面布局
css语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
格式：
selector{
property: value;
property: value;
property: value
}
示例及详解
h1 {color:red; font-size:14px;}
css注释
/*单行注释*/
/*
多行注释
多行注释
*/引入css的方式
1 行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<p style="background-color：yellow">hello css</p>
2.嵌入式(内部样式)
将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head> <meta charset="utf-8"> <title></title> <style> p{ background-color：green; } </style> </head>
3.连接式
外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css">
css选择器(查找标签)
基本选择器
注意：在类选择器中：
样式类名不要用数字开头（有的浏览器不识别）。
标签中的class属性如果有多个，要用空格分隔。
组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/ li a { color: green; }
子代选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
兄弟选择器
/*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }
属性选择器
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; }