css基础操作

最新推荐文章于 2024-05-04 19:31:28 发布

monster - r

最新推荐文章于 2024-05-04 19:31:28 发布

阅读量270

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/rrl18215821889/article/details/131883280

版权

css具有层叠性，属性名相同时，后面的样式会将前面的样式覆盖，只表现后面样式所呈现的结果

字体样式变化

将字体变大或变小

原本样式（此时字体大小为16px，粗细为400）

例如将字体变大

（用外部样式创建css文件进行操作）

将字体变大

设置字体的书写样式

例如：将字体种类改为宋体

改变字体的粗细

将字体加粗

方法一：用代码直接实现（默认值为normal）

方法二：用数字更改粗细

改变字体样式：

例如：

将字体倾斜

可以将font的代码连写（字号和字体书写样式必须同时存在且顺序不能交换）

（一般不用连写形式）

p {
    font: italic 700 20px '宋体'
    ;
}

改变文本样式：

原文本

<body>
  <P>朱自清《荷塘月色》片段

    路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
    
    曲曲折折的荷塘上面，弥望旳是田田的叶子。叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。
    </P>
</body>

首行缩进两个字符

 p { 
   text-indent: 2em;
  
}
/*em代表当前一个字符的大小*/

改变文本对齐方式：

原文本：

居中对齐（居中的不是元素而是内容）

 div { 
   text-align: center;
  
}

让图片居中

此时文本和图片的样式（text-align: center; 对于图片，input等都适用）

 .box1 { 
   text-align: center;
  
}
.box2{
    width: 400px;
    height: 400px;
    background-color: pink;
}

图片居中对齐（对于box2而言）

 .box1 { 
   text-align: center;
  
}
.box2{
    width: 400px;
    height: 400px;
    background-color: pink;
    text-align: center;
}

此时再向box2内写入文本，也会处于居中对齐状态

改变链接样式

原本样式：

去除链接下划线：

css代码为：

a {
    text-decoration: none;
}
/*清除默认样式*/

添加删除线：

css代码为

a {
    text-decoration: line-through;
}

添加下划线（超链接默认状态下有下划线）：

css代码为：

a {
    text-decoration: underline;
}

英文字母大小写转换

原文本样式

将第一个li里面的英文变成大写

css代码：

ul li:nth-child(1) {
    text-transform: uppercase;
}

如图

将第三个li里的英文变成小写

css代码

ul li:nth-child(1) {
    text-transform: lowercase;
}

设置行高：

原样式

css代码：

p {
    line-height: 50px;
}

设置一个区域

行高：两行文字中间空白处中间与相邻两行中间空白处之间的距离

例如下图中的黄线长度：

在区域内写入（我是一个容器）并在区域内居中对齐

css代码：

div {
    width: 300px;
    height: 400px;
    background-color: pink;
    text-align: center;
}

单行文本借助行高垂直居中对齐（要理解行高的含义才能正确使用此方法）

css代码：

div {
    width: 300px;
    height: 400px;
    background-color: pink;
    line-height: 400px;
}

解决文本溢出：

原文本样式

添加一个滚轮使文本全部处于文本中，且都能被查看

css代码（overflow auto 只添加y轴上的滚轮）：

div {
    width: 200px;
    height: 400px;
    background-color: pink;
    overflow: auto;
}

css代码（overflow:scroll 在x轴和y轴都添加一个滚轮）：

div {
    width: 200px;
    height: 400px;
    background-color: pink;
    overflow:scroll;
}

将溢出部分隐藏

css代码（overflow:hidden 但此时无法查看被隐藏部分的内容）：

div {
    width: 200px;
    height: 400px;
    background-color: pink;
    overflow:hidden;
}

设置背景图片

原文本样式：

css代码（此时只铺了y轴）：

body {
    
    height: 4000px;
    background-color: pink;
   background-image: url(./背景.jpg);
}

将x轴和y轴都铺上背景图片（加上一个width 属性）

css代码：

body {
    width: 500px;
    height: 4000px;
    background-color: pink;
   background-image: url(./背景.jpg);
}

不重复平铺：

body {
    width: 500px;
    height: 4000px;
    background-color: pink;
   background-image: url(./背景.jpg);
   background-repeat: no-repeat;
}

css代码;

只平铺x轴 --- background-repeat: repeat-x

只平铺y轴 --- background-repeat: repeat-y

背景图片不随着滚轮的滚动而滚动 --- background-attachment: fixed;

将背景图片定位到右下 --- background-position: right bottom;

将容器强行铺满 --- background-size :cover;

无序列表：

原文本样式

去除无序列表默认样式：

css代码：

li {
list-style: none;
}

前面加空心小圆点 --- list-style: circle;

默认样式 --- list-style: disc;

设置数字顺序 --- list-style: decimal;

元素显示模式转换

原文本样式（span 是行内元素无法加宽高）

将其转换为块元素（块元素独占一行）

span {
background-color: pink;
width: 100px;
height: 50px;
display: block;
}

将其转换为行内块元素

span {
background-color: pink;
width: 100px;
height: 50px;
display: inline-block;
}

将块元素转换为行内块元素

例如：

结果

monster - r

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础操作

此时文本和图片的样式（text-align: center;对于图片，input等都适用）此时再向box2内写入文本，也会处于居中对齐状态。原本样式（此时字体大小为16px，粗细为400）原文本样式（span 是行内元素无法加宽高）（用外部样式创建css文件进行操作）图片居中对齐（对于box2而言）
复制链接

扫一扫