css截取图片的方法,CSS基本操作详解及截图演示

目录

创建CSS

创建CSS

a{

font-size: 30px;

color: #9e61ff;

}

hello world

hello world

运行结果：

创建边框和背景

创建边框和背景

.c{

border-width: 5px;

border-color: #9d59ff;

border-top-color: #b1ff42;

border-style: solid;

border-bottom-style: dashed;

}

.s{

width: 677px;

height: 677px;

border: 5px solid red;

border-top: 10px dashed yellow;

background: #9d59ff;

background-image: url("网络头像.JPG");

}

hello world

hello css

运行结果：

CSS选择器

CSS选择器

a {/*这是a元素的效果，这里可以用a，同时也可以用自定义的.class1或#id还有属性[href]来特定指定某个元素*/

font-size: 40px;

color: #9e61ff;

}

a:hover{/*冒号属性是当鼠标经过的时候的样式*/

font-size: 60px;

color: red;

}

p {/*这是p元素的效果，如果这里的p换成*就是所有元素的效果*/

font-size: 20px;

color: red;

}

hello world

hello world

hello world

hello world

hello world

运行结果：

创建文本样式

创建文本样式

.class1{

text-align: center;/*这是居中*/

direction: ltr;/*从左到右排列*/

word-spacing: 50px;/*单词间间距*/

letter-spacing: 10px;/*字母间间距*/

}

.class2{

line-height: 200px;/*设置行高，也是行与行之间的间距*/

text-indent: 50px;/*设置首行缩进*/

text-decoration: underline;/*设置下划线，其中overline是设置上划线line-through是设置删除线*/

text-transform: capitalize;/*设置首字母大写，其中uppercase是全部大写，lowercase是全部小写*/

}

hello world

hello worldhello worldhello worldhello worldhello worldhello worldhello world

创建文本样式

.class1{

font-family: 微软雅黑;/*设置字体名称*/

font-size: 40px;/*设置字体大小*/

font-style: italic;/*设置字体样式*/

}

.class2{

font-variant: small-caps;/*全部小写变大写*/

font-weight: 900;/*设置加粗，可以自定义，也可以用bolder等*/

text-shadow: 1px 8px 2px;/*设置水平偏移竖直偏移和模糊程度*/

}

hello world

hello world

hello world

运行结果：

创建文本过度

创建文本过度

p{

width: 100px;

height: 100px;

background-color: antiquewhite;

}

p:hover{

width: 200px;

height: 200px;

background-color: #864eff;

transition-delay: 150ms;/*当鼠标点上后的延迟时间*/

transition-duration: 500ms;/*中间动画的时间*/

}

使用变换

使用变换

p{

width: 100px;

height: 100px;

background-color: antiquewhite;

}

p:hover{

width: 100px;

height: 100px;

background-color: antiquewhite;

transform: rotate(30deg);/*默认是以中心点顺时针旋转30度*/

transform-origin: top right;/*设置以右上角点开始,这里也可以写例如10px 20px为距坐是10px像素距上是20px像素位置*/

/*transform: scale(2);!*整体放大2倍*!*/

/*transform: scale(2);!*横向放大2倍*!*/

/*transform: scale(2);!*纵向放大2倍*!*/

}

盒子模型

盒子模型

.class1{

border: 1px solid black;

background-color: antiquewhite;/*背景颜色*/

background-clip: content-box;/*设置背景只在内容区域显示*/

padding-top: 20px;/*上边内边距*/

padding-left: 20px;/*左边内边距*/

padding-right: 20px;/*右边内边距*/

padding-bottom: 20px;/*下边内边距*/

/*padding: 80px 60px 40px 20px;!*距上右下左的距离*!*/

margin-top: 50px;/*上边外边距*/

margin-right: 50px;/*右边外边距*/

margin-left: 50px;/*左边外边距*/

}

hello world

标签：截图,color,background,world,基本操作,20px,font,hello,CSS

来源： https://blog.51cto.com/u_15065305/2979556