前端入门-css样式
Css的作用就是为你编写的页面添加你想要的样式，从而达到炫酷漂亮的画面。
可在html源代码那写入(必须包裹在style标签里编写)
也可以单独css文件写入(如下图) 如何建css文件这里就不说了哈
写法（以单独文件写法）：
首先要在html那边获取需要编写样式的样式的类名
然后再回到css样式那边来编写，（注意，要在类名前面加个英文状态的小点 .yuge{在这里面写它的样式}，称之为类选择器(id的与之一样，不过要在id前面加#号， 例：#yuge{在这里面写它的样式});还有（元素选择器(元素选择器是最简单的选择器) 例：p {color:red;}。经常用到的两种选择器）
一个元素的最基本样式：宽(width)、高(height)、背景(background)……(一般开始写就先把body的内边距(padding)与外边距(margin)设为0(一般写在最前面)，这样相对后面的编写会方便一点，)
即
body {
margin: 0;
padding:0;
}( margin: 0 auto;这样写可以起到令该元素水平居中的效果)
然后我给这个元素设宽高与背景颜色
.container {
height: 300px;（高度为300像素(px)）
width: 600px; （宽度为300像素(px)）
background:red; （背景颜色为红色）
text-align: center; (文本居中，效果与margin: 0 auto;差不多)
}
在网页上就会出现一个高度为50像素(px)、宽度为600像素(px)同时背景颜色为红色的长方形(效果图如下)
background//背景图片(想在元素上加背景图片的话,可直接在html上用img标签实现，也可以在css样式里用背景代码URL()含数指定图片地址加入，就是把颜色换成图片插入)
显示方法：center(居中显示)，repeat(纵横同时重复), no-repeat(不重复), repeat-x(x轴方向重复), repeat-y(y轴方向重复)等五个方法
代码如下
.container {
height: 300px;（高度为300像素(px)）
width: 600px; （宽度为300像素(px)）
background:url(./../imgars/photo/1532874590156.jpeg) center(居中显示);
text-align: center; (文本居中，效果与margin: 0 auto;差不多)
}
效果图如下
然后我们可以再给它加个边框(border)、圆角与阴影, 属性值：none(无边框),hidden(隐藏框),dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双线边框),groove(3D凹槽边框),ridge(3D凸槽边框),inset(3D入边框),outset(3D凸出边框)
还有我们的圆角边框:border-radius:该属性用于指定圆角边框的圆角半径；
border-top-left-radius:该属性用于指定左上角的圆角半径；
border-top-right-radius:该属性用于指定右上角的圆角半径；
border-bottom-left-radius:该属性用于指定左下角的圆角半径。
代码如下
.container {
height: 300px;（高度为300像素(px)）
width: 600px; （宽度为300像素(px)）
background:url(./../imgars/photo/1532874590156.jpeg) center(居中显示);
text-align: center; (文本居中，效果与margin: 0 auto;差不多)
box-shadow: 5px 5px 5px #17a2b8;（前面三个5px相当于调方向，#17a2b8是阴影颜色）
border: 2px solid red; (2个像素(px)的边框，solid(实线)，red(红色))
border-radius: 10px; (10个像素(px)的圆角效果，想要圆的话直接把值设成50%)
}
效果图如下，是不是还阔以?
再来个三角形状(无非也就是把元素的上边、右边、左边给隐藏掉罢了)
代码
.container i{
border: 10px red solid;
border-color: transparent transparent red transparent; (transparent(隐藏))
}
效果图如下
剩下的就直接一波代码加文字解释（下面大多直接搬过来的(因楼楼懒?)，需要的可以自己拿去编写哈，除了特定的单位之外，其他的差不多都是用像素(px)做单位的哈）
1.定位(position):CSS布局的核心是position属性,对元素应用这个属性,可以相对它在常规文档流中的位置重新定位。
(1) position属性有4个值:static(默认),relative,absolute,fixed。
(2) static:静态定位的情况下,每个元素都处在常规文档流中,它们都是块级元素,所以就会在页面上自上而下的堆叠起来。
(3) relative相对定位中的相对是指和它原来的文档流中的位置(或者默认位置)。可以用top,right,bottom,left属性值来改变它的位置。多数情况下我们用top和left就可以实现效果。
absolute:绝对定位和前面3种定位完全不一样。因为绝对定位会把元素彻底从文档流中拿出来。然后再相对于其他元素定位。)
2.伪类:伪类这个叫法源于它们跟类相似,但实际上并没有类会附加到标记中的标签上。
伪类分为两种(以及新增的伪类选择器):
(1).UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于链接上),为该元素应用CSS样式。
Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
Selector:visited ：匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
Selector:hover ：匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:active ：匹配Selecto选择器且处于被用户激活(在鼠标点击与释放之间的状态)的状态的元素。
Selector:focus ：匹配Selector选择器且已得到焦点的元素。
Selector:enabled ：匹配Selector选择器且当前用于处于不可用状态的元素。)
下面示范一个我自己常用的鼠标悬停伪类(配合css3很好玩)写法：
代码如下(就拿之前那个三角代码加伪类)：
.container i{
border: 10px red solid;
border-color: transparent transparent red transparent;
}
.container i:hover{
border: 10px red solid;
}
效果图如下(录得不怎么好(见谅)，鼠标是在红色三角形那的哈(录制工具可能有点问题))
3.文本相关属性
(1)text-decortion:该属性用于控制文字是否有修饰线。属性值:none(没有),underline(下划线),line-through(中划线)、overline(上划线),blink(闪烁)
(2)text-align:设置文本对齐。属性值:center,left,right,justify(两端对齐)
(3)text-shadow:该属性用于设置的文字是否有阴影效果。 Color:指定该阴影的颜色;Xoffset:指定阴影在横线上的偏移;Yoffset:指定阴影在纵向上的偏移;Radius:A指定阴影的模糊半径。模糊半径越大,阴影看上去越模糊
(4)多重阴影：多加几组数据即可。sytle=“text-shadow:5px 5px 2px #cf0”
(5)line-height:设置文字的行高,即字体最低端与字体内部顶端的距离。负值的行高可以实现阴影效果。
(6)Text-transform：设置文字的大小写。属性值:none,capitalize(首字母大写),Uppercase(全部大写),lowercase(全部小写)
(7)letter-spacing:设置字符之间的间隔。
(8)word-spacing:设置单词之间的间隔。
text-shadow:10px 10px 2px #FC0 多阴影效果）
4.Overflow
CSS提供了overflow,overflow-x,overflow-y这三个属性来控制
html组件不够容纳内容时的显示方式。这三个属性的功能基本相似，区别就是控制的方向不同。
overflow同时控制两个方向，overflow-x控制水平方向，overflow-y控制垂直方向。
属性值：hidden,auto 代码写法： overflow: hidden;（）
5.浮动与清除(float and clear)
在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。
浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，
原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。
如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。
浮动(float)的三个属性值：left(左浮动),right(右浮动),none.
clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both
6.字体相关属性
○1color:该属性用于控制字体颜色，该属性值包括字符类型的颜色名、十六进制的颜色值、rgb(255,255,255)值。还有CSS3提供的HSL颜色值。
○2font-famliy:设置文字的字体。因为浏览器内嵌字体的支持，该属性可以设置多 个显示字体，浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字，多个属性值之间用逗号(,)隔开。
○3font-size:设置字体的大小。此处的字体大小分为相对字体大小和绝对字体大小。
还可以使用关键字。例如：medium,saml,large,samller,larger等
绝对字体大小：使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小，
它们是绝对单位，设置多大就是多少，不会受到祖先元素的 字体大小影响。
相对字体大小：使用百分比(%),em或者rem,这些单位的值是相对的，该字体的大小要相对该元素最近的“被设定过字体大小”的祖先元素来确定，比绝对字体大小的设定要复杂点。
○4font-style:设置字体的风格。属性值有：normal(正常),italic(斜体),oblique(倾斜)。
○5font-weight:设置字体是否加粗。属性值：lighter,normal,bold,bolder.
○6font-variant:设置文字的大写字符的格式。属性值：normal,small-caps(小型的 大写字母字体)
○7font: 简写。简写规则：规则一：必须声明font-size和font-famliy的值
规则二：声明顺序
①font-weight,font-style,font-variant不分先后
②然后是font-size
③最后是font-famliy
好了，本期到此结束?
扫一扫
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
