css 样式表含左浮动右浮动

最新推荐文章于 2023-03-22 11:47:21 发布

天使的魔鬼脸

最新推荐文章于 2023-03-22 11:47:21 发布

阅读量2k

点赞数

分类专栏： css 文章标签： css 样式表

本文链接：https://blog.csdn.net/qq_41926039/article/details/100546740

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

****** 链接外部样式
css
h1{
color: aquamarine;
font-size: 120;
font-weight: 150;
font-style: italic;
}

外部html 注释 rel很重要

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<link href="css/waibu.css" type="text/css" rel="stylesheet"/>
<h1>我的天啊</h1>
</body>
</html>

******导入样式
注释：style 写在head 里面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

******行内样式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <p style="font-size: 60; color: cornflowerblue; font-style: italic;">我是谁</p>
   </body>
</html>

*****内嵌样式

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           h1{
               font-size: 100px;
               color: deepskyblue;
               font-weight: 200;
               font-style: italic;
           }
       </style>
   </head>

   <body>
       <h1>woshishei </h1>
   </body>
</html>

list-style-type 定义列表前面的项目符号
Disc(实心圆)、circle(空心圆)、 square（方块）、 none（不使用任何标号）。
list-style-image 定义列表项标志的图像【设置了图片上面的不好用了最好上个属性设置成none】
语法格式如下：list-style-image:none|url(url)
list-style-position 列表位置
语法格式如下：list-style-position:outside（默认）|inside（）在列表li的里面还是外面
去掉列表案例符号的代码是: ul{list-style:none;}
<style type="text/css">
       ul{
          border: 1px solid red;
       }
           ul li{
               border: 1px dashed black;
               /*list-style-type: decimal; 数字变成了有序列表
               list-style-image: url(../img/logo1.jpg);
               list-style-position: outside; 设置在li的里面还是外面*/
               list-style: url(../img/logo1.jpg) inside;
           }
       </style>
<ul>
           <li>列表</li>
           <li>列表2</li>
           <li>列表3</li>
</ul>

各种样式可用copy试试

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           p{
               color:red;
               font-size: 50px;
               /*font-family: "微软雅黑";*/
               font-weight:bold;
               font-style: italic;
               text-decoration: underline;
               text-align: center;
               text-indent: 4;
               line-height: 25px;
               text-shadow: 10px -10px 5px aqua;

               border-style: dashed;/*边框的虚线实心 solid*/
               border-top-style: solid;

               border: 1px solid orangered;
               height: 400px;
               width: 400px;
               border-radius: 100px;
               box-shadow: 12px 12px 12px orangered;/*盒子的阴影*/

               /*background: url(img/同学淡定.jpg) no-repeat right top;*/
               background-color: antiquewhite;
               background-image: url(img/同学淡定.jpg);
               background-repeat: repeat;

               Background-position:center;
Background-position:50% 50%;
Background-position:50% center;
Background-position:center 50%;
               /*可以取的值为关键字，数值，百分比
平：left center right（或者数值）
垂直：top center bottom（或者数值）
*/
}
       </style>
   </head>
   <body>

       <p>我是谁</p>
   </body>
</html>

分块展示

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           p{
               background-color: cornflowerblue;
               height: 90px;

           }
           div{
               margin-top: 1px;
               background-color: yellow;
               height: 50px;
           }
           div.a{
               display: block;
               background-color: lawngreen;
               height: 270px;
           }
           h1{
               background-color: darkgoldenrod;
               height: 202px;
               margin-top:17px;
               width: 25%;
               float:left;
           }

           div.di{
               margin-top: 230px;
               height: 200px;

               background-color:black;

           }
           h3{
               height: 200px;
               width: 73.5%;
               background-color: firebrick;
               float: right;
           }

       </style>
   </head>
   <body>
       <p>one</p>
       <div>two</div>
       <div class="a">42</div>
       <h1>嘿</h1>

       <h3>w</h3>
       <div class="di">22</div>
   </body>
</html>

天使的魔鬼脸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css 样式表含左浮动右浮动

****** 链接外部样式 css h1{ color: aquamarine; font-size: 120; font-weight: 150; font-style: italic;}外部html 注释 rel很重要<!DOCTYPE htm...
复制链接

扫一扫