css-day4-个人学习笔记

css-day4-个人学习笔记

 

一、CSS概述：

（Cascading Style Sheets ）层叠样式表，级联样式表，通常称为：样式表。

用户在HTML中定义元素样式：1、实现内容与表现相分离2、提供代码的可重用性。

HTML ：定义网页结构；CSS ：构建页面的样式。

HTML属性 与 CSS内容 如果能完成相同的事情，优先使用 CSS。

 

二、CSS语法：

1、使用CSS样式表的方式：

a、内联方式(行内样式)——将 CSS样式 定义在单个 HTML 元素内 

b、内部样式表——样式定义在HTML页的头元素中 

c、外部样式表——将样式定义在一个外部的css文件中（.css文件），由HTML页面引用样式表文件。<link rel="stylesheet"  type="text/css" href="样式表URL">

 

2、样式表的特征：

a、继承性——直接使用父元素声明好的样式。

b、层叠性——可以为一个元素定义多个选择器，如果样式不冲突时，他们可以合并为一个，都应用在当前元素上。

c、优先级——样式定义冲突时，会按照以下方式的优先级来应用样式，内联样式〉内部样式表=外部样式表（就近原则 - 后定义者优先）〉浏览器的缺省设置。

d、!important ——可以显示调整优先级，永远都以 !important 的为准。

 

3、选择器(重点 & 难点)：

a、通用选择器——用于匹配页面中所有的元素* { ... ... }，尽量少用 通用选择器。

b、元素选择器——用于定义或重写页面中某元素的默认样式h1{ ... }。

c、类选择器——用于定义一些元素的通用样式 .类名{ ....}。多类选择器的引用方式<any  class="class1 class2 class3">。

d、ID选择器——用于匹配页面中指定ID值的元素，#container{....}  <div id="container"></div>。优先级：元素选择器<类选择器<id选择器。

e、群组选择器——定义多个选择器中的通用样式。.heavy，#container，div.important{......}。

f、后代选择器——出现在某元素的任意层级的子元素都可以称之为 "后代元素"。#d1 span{/*定义 id为d1 中 出现的所有span 元素的样式*/}。

g、子代选择器——出现在某元素中，只具备一级层级关系元素称之为 "子代元素"。选择器1>选择器2{...}。

h、伪类选择器——匹配页面元素不同状态的选择器。选择器:伪类选择器{...}。链接伪类：:link , 定义未被访问的超链接状态；:visited,定义访问过的超链接状态。动态伪类：:hover,定义鼠标悬停在元素时的状态；:active,定义元素被激活时的状态；:focus,定义元素获取焦点时的状态。

 

三、尺寸 与 边框

 

1、单位

a、尺寸单位——%：相对单位，pt：磅，px：像素，em：父元素文字大小倍数。

b、颜色单位——rgb(r,g,b)，rgb(r%,g%,b%)，rgba(r,g,b,alpha)alpha : 透明度0 - 1 之间的数字，#rrggbb，#rgb，颜色的英文表示法（red,blue）。

2、尺寸属性

用于设置元素的宽度和高度，单位通常为 px 或 %，width : 指定元素的宽度，max-width : 最大宽度，min-width : 最小宽度。溢出：使用尺寸属性控制元素大小时，如果内容所需空间大于元素本身，会导致内容 "溢出"。overflow:visible\hidden\scroll\auto。visible：默认值，溢出可见。hidden：隐藏，溢出隐藏。scroll：滚动，让元素显示滚动条，溢出时可用。auto：自动，溢出时显示滚动条并可用。

3、边框属性

solid：实线，dashed：虚线，dotted：实线点。

border:1px solid red 设置宽度为1，实线的红色边框。

border-radius:10px 设置圆角边框为10px。

 

补充：

消除button标签默认样式

margin:0px;
padding:0px;
border:1px solid transparent;
outline:none;