css定义
什么是 CSS？
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
css主要由两个主要部分组成：选择器，一条或多条声名
例：h1 {color: red; font-size: 25px;}
选择器{属性: 属性值;}1
属性: 属性值，合称“声名”
{}:花括号是对该对象设置的具体样式
h1:选择器，用于指定css样式的HTML标签，根据不同的需求将不同的标签选择出来
所有选择器标签放入<head>~</head>之间的<style>~</style>之间
css基础选择器
1. 标签选择器
(1) 标签选择器：能够快速为页面中同类型的标签统一设置样式
例:p {color: red;}将会使所有段落标签文本内容变为red颜色
(2) 类选择器：差异选择不同标签，一个或几个（样式点定义，结构类调用）
语法：class属性
.red {color: red;}
<ul>
<li>文本一</li>
<li class="red">文本二</li>
</ul>
此时文本二就成为了红色
多类型，就是可以将多个声名放到一个类里
.green {width: 100px; height: 100px; background-color: green;}
从css中修改方便，同时节省空间
(3) id选择器：结构id调用，只能调用一次
语法：#id名{属性: 属性值}
将后面的class换为id
(4) 通配符选择器：选择所有标签（特殊情况使用）
语法：* {color: red;}
2. css字体属性
(1) 字体体系：font-family 定义文本字体系列
例： p {font-family: “Microsoft YaHei”,tahoma;}2
(2) 字体大小：font-size
<1>px(像素)大小网页常用单位
<2>谷歌默认为16px
<3>标题大小有特殊性
(3) 字体粗细：font-weight
normal(400) blod(700) bloder(特粗) lighter(细体) number(100-900)
(4) 文字样式：font-style
italic 斜体
(5) 字体符合属性：line-height 行高
font: font-style font-weight font-size/line-height font-family
例：font; italic 700 16px ‘Microsoft YaHei’3;
3. css文本属性
(1) 文本颜色
div { ①预定颜色的单词 skyblue
color: red; ②十六进制 #FF6600
} ③rgb(255,0,0)
rgb代表red，green，blue三原色
(2) 对齐文本 text-align 设置元素内文本内容的对齐方式
div { ①left(默认)
text-align: center; ②right
} ③center
(3)装饰文本 text-decoraction
①：none(默认)
②：underline
③：overline
④：line-through
(4) 文本缩进 text-indent: 20px/2em
em是一个相对单位，相对于当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，默认当前文本元素的一个文字大小
(5) 行间距 line-height: 26px
假如文本16px，则上间距和下间距就平分剩余10px
4. css引入方式
(1)内部样式表：写到html页面内部，将所有css代码抽取放到<stlle></style>中去4
(2) 行内样式：在元素标签内部 style 属性值中设定css属性
例：<div style=“color red”;>~</div>
(3)外部样式表：单独建立css文件，把css文件引入
-
建立一个css样式文件，把所有css代码放进文件中
-
在 html 页面中，使用<link>标签引入文件
<link rel=“stylesheep” herf=“css文件路径”
chrome调试工具
- ctrl +“鼠标轮” 调整开发者工具大小
- 左边是html元素结构，右边是css样式
- ctrl + 0 复原浏览器大小
- 如果点击元素，发现右侧没有样式引入，则有可能是样式类名或样式引入错误
- 有样式，但前方有黄色感叹号，则是样式属性书写错误
扫一扫
1367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
