CSS学习
1.css语法规范
css由两部分构成:选择器以及一到多条声明。
h1 { color: red; font: 25px}
2.标签选择器
标签名:{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式,只能选择全部的当前标签。
3.类选择器
语法: .类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
<标签 class="类名">
4.id选择器
id选择器可以为表有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,css中id选择器以#来定义
语法: #id名{
属性1:属性值1;
...
}
调用<标签名 id="id名">
特点:id选择器只能调用一次。
5.通配符选择器
通配符选择器使用”*“定义,他选取页面中所有的元素
语法: *{
属性1:属性值1;
...
}
特点: ①通配符选择器不需要调用,自动给所有的元素使用样式。
②特殊情况才使用,(清除所有元素的内外边距)
6.CSS字体属性
6.1使用font-family属性定义文本的字体结构
例: 选择器名{
font-family:Arial,"Microsoft Yahei",tahoma;
}
注意事项:各种字体之间必须使用英文的逗号隔开
如果是多个单词组成的字体名需要用引号包起来
尽量使用默认字体
字体名一次判断在电脑中是否存在,若1存在就使用使用1,1不存在就判断2存不存在,2存在就用2,不存在就判断3存不存在......;
6.2使用font-size属性设置字体大小
例:选择器名{
font-size:20px;
}
注: px(像素)大小是我们网页最常用的单位
可以给body整个页面指定文字大小
6.3使用font-weight属性设置文本字体的粗细
语法: 可以使用类选择器,也可以使用标签选择器
例:.bold{
font-weight:number;
}
属性值 描述
normal 默认值(不加粗)
bold 定义粗体(加粗)
100-900 400等同于normal,700等同于bold
6.4使用font-style属性设置文本的风格
语法:可以使用类选择器,也可以使用标签选择器
例: p{
font-style:normal;
}显示标准样式的字体
属性值 作用
normal 默认值,浏览器显示标准的字体样式
italic 浏览器会显示斜体的字体样式
6.5字体复合属性
例:
body{
font: font-style font-weight font-size/line-height font-family;
}
依次是 字体样式 字体粗细 字体大小/行高 字体结构
注意点:①属性必须依次写,不能更改顺序。
②font-size和font-family必须有,不能省略
7.CSS文本属性
7.1对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式。
例: div{
text-align:center;
}
属性值 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐
7.2装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
例: div{
text-decoration:underline;
}
属性值 描述
none 默认。没有装饰线
underline 下划线。链接<a>自带下划线
overline 上划线。
line-through 删除线。
7.3文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行进行缩进。
例:div{
text-indent:10px;
}
或
div{
text-indent:2em;
}
em是一个相对单位,就是当前元素(font-size)一个元素的大小
7.4行间距
line-height属性用于设置行间的距离
p{
line-height:26px;
}
行间距=文本高度+上间距+下间距
7.5行内样式表
内嵌式:
例:<p style="color">asdasdasdas</p>
css基础
最新推荐文章于 2024-08-26 19:32:29 发布