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轴越往下越大

Adobe Fireworks CS6的使用:Ctrl+Alt+鼠标滚动就可以变大或缩小图片。打开图片,选择右侧的图层,然后选中打开的图片,在小眼睛右边选中加锁,这样子不会改变图层。找到需要使用的图标,大概选中图标,然后按住Ctrl来调整需要图片的准确大小。


内边距:边框和内容之间的距离。

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


box盒子模型:内容的宽度和高度:通过标签的with和height来设置的。

元素的高度和宽度: 宽度=左边框+左边距+with+右内边距+右边框,高度:同理可证。

元素空间的高度和宽度: 宽度=左外边距+左边框+左边距+with+右内边距+右边框+右外边距,高度:同理可证。


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

你可能感兴趣的:(CSS前端笔记(百度传课))