2017/2/23 学习css的第二天

来源：互联网发布：毕业生找工作知乎编辑：程序博客网时间：2024/06/05 19:11

1、分组选择器

<head>
<style>
span,p,h1{属性1:值;}
span,p.a,h1#b{属性1:值;}（可以搭配类选择器、ID选择器使用）
</style>
</head>

<span></span>
<p class="a"></p>
<h1 id="b"></h1>

2、派生选择器

通过父级找到子级

div span{属性1:值;}

<div><span></span></div>

3、属性选择器

{name}{type}{color:值;}
{name="username"}{type="text"}{属性:值;}

<input type="text" name="username" value="" />

======================================================

1、字体颜色

颜色：color:

字号：font-size:

字体：font-family:Arail
font-family:"微软雅黑","隶书"，"楷书"；

加""中文：带空格或者其他符号

字体风格 font-style:normal 不倾斜

font-style:itaic 文字倾斜

font-style:oblique 文本倾斜

字体粗细 font-weight:normal; 不变粗

font-weight:bold; 变粗

2、文本样式

首行缩进 text-indent:2em em一个字号的大小

1em=16px (也可以使用百分比)

对齐方式 text-align:left/center/right;

字间距 word-spacing:值px; 在中文中只在（有空格的地方）才能使用

字母间距 letter-spacing:值px;

行间距 line-height:值px;(行高)

字母大小写的转换 text-transform:uppercase 大写

none 不变

lowercase 小写

capitalize 首字母大写

文本修饰 text-decoration:underline；下划线

none 不变

overline 上划线

line-through 贯穿线

3、背景

背景色

background-color:#值;

英文

十六进制

rgb(0,0,0) 0-255 不带透明度

rgba(0,0,0,0,6) 带透明度 0-1 1没有透明度(背景色透明，字不透明)

opacity:0.4（背景色和字都透明）

width:值px

height:值px

背景图片

background-image:url(链接);

background-repeat:no-repeat; 不重复

repeat-y 垂直重复

repeat-x 水平重复

图片定位：background-position:100px 水平方向和垂直方向都移动100px

固定数字 100px 100px ; 垂直向下移动100ox 水平向右移动100px

百分比：10% 50% 垂直向下移动百分之十水平向右移动百分之五十

关键字 left top; center bottom right

background-position:100px 第一个值为水平方向（向右移动100px）
垂直水平方向默认center

0 0