一.CSS样式
(1)行内式.CSS介绍 CSS 是 层叠样式表的简称,也是一种标记语言。CSS 主要用于设置 HTML 页面中的 文本内容, 图片的外形以及 版面的布局和外观显示样式 。 可以简单理解: CSS 可以美化 HTML , 让 HTML 更漂亮,让页面布局更简单 。
二.基础知识
但使龙城飞将在
1 (2)内联式 内部样式表 div { color: red; } 1 2 3 4 5 6 (3)链入式 1 2 3 2.基础选择器 选择器 分为 基础选择器 和 复合选择器 两个大类 基础选择器包括: 标签选择器 、 类选择器 、 id 选择器 和 通配符选择器。(1)标签选择器 语法格式:
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}
(2)类选择器 .类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
(3)id选择器 #id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
(4)通配符选择器 *{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
3.复合选择器 (1)后代选择器 后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。 语法: 元素 1 元素 2 {样式声明}
/* 我想要把ol里面的小li选出来改为pink */ ol li { color: pink; } ol li a { color: red; } .nav li a { color: yellow; }(2)子选择器 子元素选择器(子选择器) 只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。 语法: 元素1 > 元素2 { 样式声明 }
(3)并集选择器 并集选择器可以选择多组标签, 同时为他们定义相同的样式 。通过英文逗号(,)连接而成 。
(4)交集选择器 作用:选中页面中 同时满足 多个选择器的标签 选择器。 语法: 选择器1选择器2 { css }
(5)伪类选择器 伪类选择器 用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
复合选择器之链接伪类选择器 /* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */ a:link { color: #333; text-decoration: none; } /*2. a:visited 选择点击过的(访问过的)链接 */ a:visited { color: orange; } /*3. a:hover 选择鼠标经过的那个链接 */ a:hover { color: skyblue; } /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */ a:active { color: green; } </style> 小猪 4.字体样式属性 (1)字体大小font-size font-size:像素值; 例:font-size:10px;(2)字体类型font-family font-family:字体名; 例:font-family:楷体;