CSS基础认识 |青训营笔记CSS基础认识| 青训营笔记什么是CSS，CSS语法，CSS选择器，CSS添加器，CSS颜

鲸鱼.jpg

青训营笔记创作第一天

什么是CSS

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

CSS语法

CSS规则由选择器和声明块组成: 选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
例如： h1 { color:red; font-size:14px;}
h1是CSS中的选择器（它指向元素<h1>) color 是属性，red是属性值。

CSS选择器

元素选择器
根据元素名称选择HTML元素 p{color:red;backgroundcolor:blue;}
id选择器
元素的id在页面中是唯一的，选择具有特定id的元素，id=pageone的元素，#pageone{color:red;}
通用选择器
( * )选择页面上所有的HTML元素
类选择器
选择特定class的元素，选择以class=header的元素，.header{color:red;}
属性选择器
根据元素的属性进行选择，可以的单一的某个属性，可以是多个属性，属性与属性值必须死完全匹配；
a[href^="#"]选择a属性值以#开头的所有元素；
a[href$="#"]选择a属性值以#结尾的所有元素；
a[href*="#"]选择a属性值中包含字串#的所有元素。
伪类选择器
伪元素用于设置元素指定部分的样式；例如：p::first-line{color:red;} ::first-line用于向文本首行添加特殊样式，只适用于块元素。
组合
直接组合 AB 满足A同时满足B input：focus
后代组合 A B 选中B，如果它是A的子孙 nav a（不管相隔多少级，只要在A下面出现B）
亲子组合 A>B 选中B，如果它是A的子元素 section>p （B元素必须是A的直接子元素）
兄弟选择器 A ~ B 选中B，如果它在A后且和A同级 h2~p
相邻选择器 A+B 选中B，如果它紧跟在A后面 h2+p

CSS添加方式

1.外链（比较推荐，关注点分离） <link rel="" href="">外部文件需要以.css扩展名保存
2.嵌入(<head>部分） <style> </style>
3.内联（<body>部分）

CSS颜色

RGB值
rgb(200, 12, 13) 参数分别代表红，绿，蓝在0 ~ 255 范围内的颜色强度
HSL值
hsl(360, 100%, 100%) 参数分别代表颜色范围0 ~ 360，纯度0 ~ 100%，亮度0 ~100%
HEX值
#rrggbb 十六进制值指定颜色，ff最大值，00最小值
颜色透明度 alpha
alpha=1,完全不透明，alpha=0，完全透明；hsl(360, 100%, 100%, 0)

CSS字体

通用字体族
衬线字体（Serif）
无衬线字体（Sans-serif)
等宽字体（Monospace）
草书字体（Cursive）
幻想字体（Fantasy）
font-family属性
p { font-family: "Times New Roman", Times, serif;}
注意：在同时有英文字体和中文时，应该先写英文所用的字体样式，再表示中文的字体样式；
Web-Font 浏览器渲染
@font-face
{ font-family: f1;/*指定一个字体的名字*/
src:/*字体的来源*/
url("") format();
}
字体大小 font-size
字体粗细 font-weight：100
字体样式 font-style
行高 line-height：1.52（原来字体大小 * 1.52）

CSS列表

无序列表

 <p>这是无序列表ul</p>
       <ul class="a">
        <li>HTML</li>
        <li>HTML</li>
        <li>HTML</li>
       </ul>

有序列表

 <p>这是有序列表</p>
       <ol class="b">
        <li>css</li>
        <li>css</li>
        <li>css</li>
       </ol>

CSS表格

<table class="t" >
    <tr>
        <th>HTML</th>
        <th>HTML</th>
        <th>HTML</th>
    </tr>
    <tr>
        <td>JS</td>
        <td>JS</td>
        <td>JS</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>css</td>
        <td>css</td>
    </tr>

</table>

合并表格边框
border-collapse设置是否将表格边框折叠为单一边框
表格填充

 th{/*表头填充*/
        color: white;
        background-color: green;

       }
       td:nth-child(odd)/*奇数列填充颜色，tr:nth-child(odd)奇数行填充颜色*/
       {
        background-color: greenyellow;
       }

CSS基础认识 |青训营笔记