`## CSS入门基础(二)
字体样式
字体类型 font-family
字体大小 font-size
字体粗细 font-weight 100-700 400=normal 700=bold
字体得风格 font-style
符合属性 font-style font-weight font-size font-family
文本样式
color 字体颜色 支持三种
text-decoration 字体得修饰 (a标签去掉下划线)
<style>
p {
/* 文本修饰
underline 下划线 (常用)
line-through 删除线(不常用)
overline 上划线 (几乎不用)
none 无装饰线 (最常用)
开发中使用text-decoration: none; 清除a标签默认的下划线
*/
text-decoration: overline;
}
a {
/* 无装饰线 */
text-decoration: none;
}
</style>
text-align 文本格式 居中 左对齐 右对齐
line-height 行间距
text-index ??em 首行缩进
text-shadow;水平阴影,垂直阴影,模糊的距离,以及阴影的颜色 ; 给文本添加阴影:
text-overflow :文本溢出属性指定应向用户如何显示溢出内容
属性:ellipsis 溢出部分显示省略号
clip 溢出部分不显示word-wrap:break-word 允许对长的不可分割的单词进行分割并换行到下一行。
背景样式
background-image 通过background-image属性添加背景图片,不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
div{
background-image:url("./a.png");
background-repeat:no-repeat;/*背景图片不重复 平铺*/
background-repeat:repeat-x;/*在x轴上重复*/
background-positioncolor:#ccc; /*背景图片的层级比背景颜色得层级高*/
background-position:20px 80px; /*x轴 y轴*/
}
background: url(…) right bottom no-repeat, url(…) left top repeat;(允许添加多个背景,且对多个背景设置属性)
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
background-size 指定背景图像的大小
div /* 重置背景图象 */
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
div /*伸展背景图像完全填充内容区域*/
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
边框样式
border-radius 属性被用于创建圆角 例如:border-radius:25px;
box-shadow 属性被用来添加阴影 例如 :box-shadow: 10px 10px 5px #888888;
border-image 属性允许指定一个图片作为边框
border-image-repeat(用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。)
线性渐变
线性渐变 语法 :background-image: linear-gradient(direction, color-stop1, color-stop2, …);
使用角度 语法:background-image: linear-gradient(angle, color-stop1, color-stop2);
设置形状 语法:它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse
#grad {
background-image: linear-gradient(#e66465, #9198e5);/*从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:*/
}
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow); /*从左边开始的线性渐变。起点是红色,慢慢过渡到黄色:*/
}
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);/*从左上角到右下角的线性渐变:*/
}
#grad {
background-image: linear-gradient(-90deg, red, yellow); /*带有指定的角度的线性渐变:*/
}
#grad {
background-image: linear-gradient(red, yellow, green);/*带有多个颜色从上到下得渐变*/
}
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); /*一个带有彩虹颜色和文本的线性渐变*/
}
#grad {
background-image: radial-gradient(circle, red, yellow, green);/*形状为圆形的径向渐变*/
}
伪类选择器
a:link 未访问过得链接
a: visited 选择点击得链接
a:hover 鼠标经过
a:active 鼠标按下没有松开时
input:focus 聚焦
a:link {color: red}
a:visited; {color: yellow}
a:hover {color: blue}
a:active {color: orange}
input:focus{background-color:red}
<a href="#"> 这是一个a标签 </a>
<input type="text">
CSS权重
选择器 选择器的权重 继承或* 0,0,0,0 元素选择器或者标签选择器 0,0,0,1 类选择器或者伪类选择器 0,0,1,0 ID选择器 0,1,0,0 行内样式style 1,0,0,0 important重要的 无穷大