ComTechnology - 前端 - CSS
CSS
样式与内容分离
HTML与JS分离
Do/What/Why-我的想法/别人的想法
为什么-分析工具
1.What is CSS? is/character/function(What does css do?)
1).CSS 指层叠样式表 (Cascading Style Sheets)
2).Character:<link>
通常存储在.css
3).Function(What does css do?)
样式定义如何显示 HTML 元素
样式对网页中元素位置的排版进行像素级精确控制
外部样式表可以极大提高工作效率
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
2.CSS语法
selector{Declaration}
Declaration-property:value;
选择器-改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。
每个属性有一个值。
属性和值被冒号分开。
3.id 和 class 选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
4.background
background-color
background-image
background-repeat
background-attachment
background-position
5.文本属性
color
text-align 排列/对齐
text-decoration 装饰
text-indent 缩进
word-spacing 字间隔。默认值 normal 与设置值为 0 是一样
6.font
font-family
font-style
italic 和 oblique 的区别
font-size
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素
1em和当前字体大小相等。在浏览器中默认的文字大小是16px
7.css link
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
text-decoration 属性主要用于删除链接中的下划线
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景颜色属性指定链接背景色
a:link {}
a:visited {}
a:hover {}
a:active {}
8.list
propety- list-style-type
none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-roman：小写罗马数字
upper-roman：大写罗马数字
9.table
10.CSS 盒子模型(Box Model)
Margin/边缘（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border/边界（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding/填补（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content/内容/目录（内容） - 盒子的内容，显示文本和图像
250px;
padding:10px;
border:5px solid gray;
margin:10px;
11.分组和嵌套-目录/查询关键字
12.css display(显示) 与 visibility（可见性）
13.Positioning(定位)
14.css float(浮动)
15.CSS 水平对齐(Horizontal Align)
16.伪类
selector:pseudo-class {property:value;}
17.伪元素
selector:pseudo-element {property:value;}
--参考文档
https://www.w3cschool.cn/