前端开发之 CSS基础

CSS基础

• css作用：美化网页，布局页面
• 语法规范：选择器+声明

<stytle>
      /*选择器{样式}*/
      p {
      coler: red;
      font-size: 12px;
      }
</stytle>

CSS基础选择器——单个选择器组成

包括：标签选择器，类选择器，id选择器，通配符选择器

1. 标签选择器：标签名作为选择器,快速选择某一类标签修改样式
2. 类选择器：单独选择其中的一个标签，通常搭配js使用

<stytle>
  .red {
  coler： red;
  }
</stytle>
......
<p class="red">我是红色</p>
/*口诀：样式点定义，结构类调用，一个或多个，开发最常用*/

*多类名的类选择器，用空格隔开即可

3. id选择器

<stytle>
  #pink {
      coler: pink:
  } 
</stytle>
......
<p id="pink">我是粉色</p>
/*口诀：样式#定义，结构id调用，只能调用一次，别人切勿调用*/

4.通配符选择器——选取页面中所有的标签

<stytle>
  * {
  coler: 0;
 }
</stytle>

*通配符选择器不需要调用

CSS字体属性

字体样式font-family: 'Microsoft YaHe',Arial,Helvetica;
字体大小font-size: 20px;
字体粗细font-weight: normal=400,bold=700,number,bolder,lighter;
文本样式font-style: italic,normal;
font复合属性font: italic 700 16px 'Microsoft YaHe'

*字号字体必须同时出现才能字体连写；一定要按照顺序：style,weight,size,family

CSS文本属性

文本颜色color: pink,#ff0000,rgb(255,0,0); 常用16进制
对齐文本text-align: left,right,center;
装饰文本text-decoration: none,underline,line-through,overline;常用添加和删除下划线
文本缩进text-indent: 2em;
行间距line-height: 26px

CSS三种引用方式

内部样式表，一般放在HTML的head标签内
行内样式表，在标签内直接添加<p style="color: red">我是粉色的</p>;
外部样式表，新建.css文件再使用<link rel="stytlesheet" href="路径">引入到html标签中

Chrome调试工具

• 打开方式：F2键或右击空白处检查elements
• 使用调试工具：（只能检查代码，不能修改代码）
  滑动滚轮调节大小
  左侧是HTML右侧是CSS

目标：

能够使用element语法
能够使用CSS复合选择器
能够写出伪类选择器的规范
能够说出元素有几种显示模式
能够写出元素显示模式的相互转换码
能够写出背景图片的设置方式
能够计算CSS的权重

Element语法

1. 快速生成html结构， 输入标签名+Tab

• 快速生成多个标签，输入标签名*10+Tab
• 父子级标签，如ul>li
• 兄弟级标签，如div+p
• 带有类的，标签.color+Tab
• 带有ID的，标签#one+Tab
• 想生成的标签里默认显示几个文字div{文字}+Tab
• 如果想生成有顺序的用自增符号div{$}+Tab

2.快速生成CSS样式，首字母+Tab