CSS前端笔记(百度传课)

css给字体设置备选方案:font-family:"字体1",“字体2"。。。;中文常用的字体:宋体(simsun)、黑体(simHei)、微软雅黑(Microsoft Yahei),英文常见的字体:Times New Roma、Arial


【font-style:italic; /* 定义文字样式属性 normal:正常的,italic:倾斜的。*/

font-weight:bold; /* 定义文字粗细的属性,bold加粗,bolder比加粗还要更粗*/
font-size:20px; /* 单位是像素,通过font-size一定要带像素px*/
font-family:"微软雅黑"; /*定义文字字体*/】


【文字属性的简写:
缩写方式:font:style(样式) weight(加粗) size(大小) family(字体);
例如:font:italic bold 20px "黑体";
style weight 2个属性可以省略,style weight 的位置可以交换,而size family不能省略和不能交换。】


【1、文本装饰属性:格式 text-decoration:underline;
取值:underline 下划线
line-through 删除线
overline 上划线
none 什么都没有,用于去掉超链接的下划线
2、文本水平对齐属性:
取值:left、right、center、
3、文本缩进属性:
格式:text-indent; 2em; 】


【在CSS中如何通过color属性来修改文字的颜色,格式:color:值。
取值:
1、英文单词:不是所有的颜色都能通过英文单词来表达。
2、rgb:其中r(red 红色) g(green 绿色) b(blue 蓝色),格式:rgb(0,0,0)
红色(255,0,0) 绿色(0,255,0) 蓝色(0,0,255) 黑色(0,0,0) 白色(255,255,255) 只要让红绿蓝值一样就是灰色,三个值越小越偏黑,越大越偏白。
3、rgba:CSS3才出来的,rgba中的a代表透明度,取值0-1,取值越小越透明,例:rgba(255,255,255,0.8)。
4、十六进制
5、十六进制的缩写】


【标签选择器:标签名称{属性:值; }
id选择器:#id名称{属性:值; }
类选择器:.类名{属性:值; }
后代选择器:标签名称1标签名称2{属性:值; }
子选择器:标签名称1>标签名称2{属性:值; }
交集选择器:选择器1选择器2{属性:值; }
并集选择器:选择器1,选择器2{属性:值; }
相邻兄弟选择器:选择器1+选择器2{属性:值; }指给指定选择器后面紧跟的那个选择器选中的标签设置属性,css2
通用兄弟选择器:选择器1~选择器2{属性:值; }指指定选择器后面某个选择器选中的所有标签,无论有没有被隔开都可以选中,css3
属性选择器:

格式:[attribute] 作用:根据指定的属性名称找到对应的标签,然后设置属性。
[attribute=value] 作用:找到有指定属性,并且属性的取值等于value的标签,然后设置属性,最常见的应用场景,就是用于区分input属性。
input[type=passworld]{} 】


【继承性:给父元素设置一些属性,子元素也可以用,这个我们就成为继承性,只有以color、font-、text-、line-开头的属性才可以继承,a标签的颜色和下划线是不能继承的,h标签的文字是不能继承的
层叠性:层叠性就是css处理冲突的一种能力



background-position:水平方面 垂直方向
水平方向:left center right垂直方向:top center bottom
具体的像素:100px 200px;一定要写px


背景属性缩写的格式:

background:背景颜色 背景图片 平铺方式 关联方式 定位方式
background属性中,任何一个属性都可以被省略,默认情况下,背景图片会随着滚动方式的滚动而滚动,如果不想让背景图片滚动的话加上background-attachment,属性fixed是不随着滚动而滚动,scroll是默认值,会滚动。


WebStorm快速写多个div:div.class名称$*3(数量值)


图标图:坐标值,X轴越往右越大,Y轴越往下越大
【CSS前端笔记(百度传课)】Adobe Fireworks CS6的使用:Ctrl+Alt+鼠标滚动就可以变大或缩小图片。打开图片,选择右侧的图层,然后选中打开的图片,在小眼睛右边选中加锁,这样子不会改变图层。找到需要使用的图标,大概选中图标,然后按住Ctrl来调整需要图片的准确大小。


内边距:边框和内容之间的距离。
外边距:标签和标签之间的距离。在水平方向上,外边距就是两个之和,在默认布局垂直的方向上默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距大就取决于谁。


box盒子模型:内容的宽度和高度:通过标签的with和height来设置的。
元素的高度和宽度: 宽度=左边框+左边距+with+右内边距+右边框,高度:同理可证。
元素空间的高度和宽度: 宽度=左外边距+左边框+左边距+with+右内边距+右边框+右外边距,高度:同理可证。



box-sizing:css3中新增了一个box-sizing属性,可以保证我们给盒子新增了padding和boder之后,盒子元素的宽度和高度不变。

    推荐阅读