CSS3学习之样式、定位

最新推荐文章于 2024-07-21 20:52:32 发布

大雷哥～

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量235

点赞数 1

分类专栏： Java Css3 文章标签： CSS3

本文链接：https://blog.csdn.net/JJJKJJ/article/details/93837323

版权

Java 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Css3

4 篇文章 0 订阅

订阅专栏

背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
在这里插入图片描述

background-color之demo

index.html文件内容：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style.css"><!--外部样式表，指定css类型，引入文件-->
</head>
<body>
    <p>测试一下背景师是否可以被继承</p><!--不可被继承，即文字颜色是黑色-->
</body>

style.css文件内容：

body{
   background-color: darkorchid;
}
p{
    width: 120px;
    padding: 10px;/*内边距*/
    background-color: aqua;
}

效果：
在这里插入图片描述

background-image之demo

index.html文件内容同上
style.css文件内容：

/*body{
    background-image: url("psb.jpg");
}*/
/*可以单纯的给某一标签加上背景图片*/
p{
    width: 200px;
    background-image: url("psb.jpg");
}

结果：
在这里插入图片描述

background-repeat之demo

style.css文件内容：

body{
    background-image: url("psb.jpg");
    background-repeat: no-repeat;/*不允许重复*/
}

在这里插入图片描述

background-position之demo

body{
    background-image: url("psb.jpg");
    background-repeat: no-repeat;/*不允许重复*/
    background-position: right ;/*图片跑到了右边，实际上是表示right和center*/
}

在这里插入图片描述

background-attachment之demo

index.html文件内容：

<body>
    <p>测试一下背景师是否可以被继承</p><!--不可被继承，即文字颜色是黑色-->
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
    <p>测试一下背景师是否可以被继承</p>
</body>

style.css文件内容：

body{
    background-image: url("psb.jpg");
    background-repeat: no-repeat;/*不允许重复*/
    background-attachment: fixed;/*将图片固定在背景中，不遂滑轮滚动而动，默认是随动而动*/
}

CSS文本

1.CSS文本属性可定义文本外观，改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进。
在这里插入图片描述

color&text_align之demo

index.html文件内容

<body>
    <p>小莹是我心中的天使</p>

</body>

style.css文件内容：

body{

    color:red;
    text-align: right;
}
p{
    background-color: aquamarine;
}

结果：
在这里插入图片描述

text-indent之demo

index.html文件内容

<body>

    <div>
        <h4>狗粮</h4>
        <p>爱小莹得永生！</p>
        <p>爱小莹得永生！</p>
        <p>爱小莹得永生！</p>
        <p>爱小莹得永生！</p>
    </div>
</body>

style.css文件内容：

h4{
    text-indent: 2em;/*首行缩进两个字符  1em=16px;*/
}

结果：
在这里插入图片描述

text-transform之demo

index.html文件内容

<body>
    <p id="p1">this is My favourite girl</p>
    <p id="p2">this is my Favourite girl</p>
    <p id="p3">this Is my favourite girl</p>
</body>

style.css文件内容：

#p1{
     text-transform:capitalize;/*首字母大写*/
 }
#p2{
     text-transform:uppercase;/*全部大写*/
 }
#p3{
     text-transform:lowercase;/*全部小写*/
 }

结果：
在这里插入图片描述
2.CSS3文本效果：
text-shadow：祥文本添加阴影，属性值 5px(距左) 5px（距上） 5px（清晰度）#FF0000（背景色）
word-wrap:规定文本的换行规则，属性：normal

字体

1.CSS字体属性定义文本的字体序列、大小、加粗、风格和变形

在这里插入图片描述

链接

1.CSS链接的四种状态：

a:link 普通的，未被访问的链接
a:visited 用户已经访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
text-decoration：去掉链接名称下面的下划线
demo：
style.css文件内容：

a:link{
    color: black;
    text-decoration：none
}
a:hover{
    color:blue;
}
a:active{
    color: blue;
}
a:visited{
    color:green;
}

列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志
在这里插入图片描述
index.html文件内容：

<body>
    <ul>
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
    </ul>
</body>

style.css内容：

ul li{
    list-style-image:url("psb.jpg") ;
}

表格

在这里插入图片描述
demo
index.heml文件内容：

<body>
   <table id="tb">
       <tr>
           <td>姓名</td>
           <td>性别</td>
           <td>年级</td>
       </tr>
       <tr>
           <td>齐雷</td>
           <td>男</td>
           <td>研一</td>
       </tr>
       <tr>
           <td>齐雷</td>
           <td>男</td>
           <td>研一</td>
       </tr>
       <tr>
           <td>齐雷</td>
           <td>男</td>
           <td>研一</td>
       </tr>
       <tr>
       <td>齐雷</td>
       <td>男</td>
       <td>研一</td>
   </tr>
   </table>
</body>

mystyle.css文件内容：

#tb,th,tr,td{
    border:1px solid blue;/*设置外边框颜色*/
    text-align: center/*文字居中*/;
    background-color: aqua;
}
/*折叠边框*/
#tb{
    width:400px;
    height: 400px;
    border-collapse: collapse;/*折叠边框*/
}

结果：
在这里插入图片描述

轮廓

在这里插入图片描述
demo：
index.html文件内容：‘
’`

小莹最美

` mystyle.css文件内容：

p{
    outline-style: dotted;/*虚线，double双实线*/
    outline-color: green;
    outline-width: 1px;
}

结果：

在这里插入图片描述

CSS3定位

定位

1.定位：CSS定位是改变元素在页面上的位置
2.CSS定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动：
绝对布局：
3.CSS定位属性：
在这里插入图片描述

CSS position属性：

static
relative
absolute
fixed

CSS浮动

在这里插入图片描述
demo：
index.html内容:

<body>
  <div id="container">
      <div id="fd"></div>
      <div id="sd"></div>
      <div id="td"></div>
  </div>
</body>

mystyle.css内容：

#fd{
    width:100px;
    height:150px;
    background-color: green;
    float: left;
}
#sd{
    width:150px;
    height:100px;
    background-color: red;
    float: left;
}
#td{
    width:100px;
    height:150px;
    background-color: blue;
    float: left;
}
#container{
    width:300px;
    height:500px;
    background-color: darkgray;
}

效果：
在这里插入图片描述

大雷哥～

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习之样式、定位

背景CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果background-color之demoindex.html文件内容：<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/c...
复制链接

扫一扫

专栏目录