CSS基础入门

最新推荐文章于 2024-09-05 23:48:57 发布

HXX_M

最新推荐文章于 2024-09-05 23:48:57 发布

阅读量269

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/HXX_M/article/details/52675772

版权

CSS:层叠样式表（给HTML"化妆"）

样式：定义如何显示HTML，通常存储在样式表中

一.样式

<h1 style="color:red;">CSS</h1>

<style>
/* CSS中的注释是这样的 */
/*将页面的所有h2变蓝 */
    h2 {
        color:blue;
    }

</style>

<link rel="stylesheet" href="demo02.css"/>

p{
color:#ff80c0;
}

二、CSS规则特性

样式组成：选择器，样式声明

三、CSS选择器

/*5.3选择激活态（正在点）的按钮 */
#b1:active {
    background-color:red;
}
/*5.4选择有焦点(光标闪烁)的文本框 */
#t1:focus {
    background-color: pink;
}
/*5.5选择鼠标悬停的图片 */
img:hover {
    width: 250px;
    height: 250px;
}

</style>

四、border与box

1.border：设置元素的边框

solid:实线

dashed：虚线

width、heigh（宽、高）：指内容区的宽、高

        /*单个边设置边框*/
   h1 {
       border-left: 10px solid blue;
   }
   /*四个边设置相同的边框*/
   p {
       border: 1px dashed red;
   }
   /*默认块元素宽100%，而高度自适应。
   当给它设置固定的宽、高后，它的内容
   才有可能产生溢出的现象。 */
   p {
       width: 300px;
       height: 50px;
       /*溢出时可以这样处理*/
       overflow: auto;
   }

2.box（框模型）：定义了元素的内边距，边框，外边距以及元素框处理元素内容

内边距（padding）

外边距（margin）

边框（border）

        div {
       border: 1px solid red;
       width: 100px;
       height: 100px;
   }
   /*1.四个边一起设置相同的边距*/
   #d2 {
       padding: 20px;
       margin: 30px;
   }
   /*2.四个边一起设置不同的边距
       顺序：上右下左 */
   #d3 {
       padding: 10px 20px 30px 40px;
       margin: 10px 20px 30px 40px;
   }
   /*3.单个边设置边距*/
   #d4 {
       padding-left: 20px;
       margin-bottom: 30px;
   }
   /*4.对边设置边距
       顺序：上下左右 */
   #d5 {
       padding: 20px 40px;
       margin: 40px 30px;
   }
   /*5.对边设置边距的特殊用法，
       只针对margin有效。即当左右值为
       auto时，该元素将水平居中。 */
   #d6 {
       margin: 20px auto;
   }

五、背景图片

    body {
       /*哪张图片*/
       background-image:
           url(../images/background.png);
       /*如何平铺*/
       background-repeat: repeat-y;
       /*设置位置*/
       background-position: center;
   }

   div {
       border: 1px solid red;
       width: 125px;
       height: 125px;
       margin: 10px auto;
   }

   /*可以采用简化的方式设置背景:
   background:背景色背景图平铺位置;
   上述4个值可以酌情省略，但至少要保留
   背景色或背景图中的任意一个。 */
   .enemy {
       background:
           url(../images/airplane.png)
           no-repeat center;
   }
   .hero {
       background:
           url(../images/hero0.png)
           no-repeat center;
   }
   /*元素内若有滚动条，则滚动时它的背景图
       会默认一起滚动，可以修改为固定。 */
   body {
       background-attachment: fixed;
   }

六、控制文本及格式

    h1,p {
       border: 1px solid red;
       width: 500px;
       /* 指定字体 */
       font-family: "微软雅黑 "，"文泉驿正黑","黑体";
   }
   h1 {
       /*文字排列 */
       text-align: center;
       /* 文字修饰 */
       text-decoration: underline;
       /*行 */
       height: 100px;
       /*首行缩进 */
       line-heigt: 100px;
   }

七、管理员列表

1.HTML页面分区布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>管理员列表-teacher</title>
<link rel="stylesheet" href="list.css"/>
</head>
<body>
   
   <div class="logo">
       <a href="#">[退出]</a>
   </div>
   
   <div class="nav"></div>
   
   <div class="core">
       
       
       <div class="content">
           
           <div class="btn"></div>
           
           <div class="data"></div>
           
           <div class="page"></div>
       </div>
   </div>
   
   <div class="copy">
       <p>版权所有、违者必究</p>
       <p>官网:www.tmooc.cn</p>
   </div>
</body>
</html>

2.css设置样式
/*该css可以被所有模块的列表页面所复用*/
/*0.统一设置一些样式*/
/*统一设置页面上的字体*/
body {
   font-family:
       "微软雅黑","文泉驿正黑","黑体";
}
/*统一去掉所有元素的默认边距，
   星是通用选择器，可以选中一切元素。 */
* {
   padding: 0;
   margin: 0;
}

/*1.对页面进行布局设置：
   包括边框、宽高、边距。 */
div {
   border: 1px solid #F00;
   margin: 0 auto;
}
.logo {
   width: 960px;
   height: 61px;
}
.nav {
   height: 91px;
}
.core {
   height: 410px;
   /*顶部预留出放渐变条的空间*/
   padding-top: 10px;
}
.copy {
   width: 960px;
   height: 50px;
}
.content {
   width: 950px;
   height: 390px;
   border: 5px solid #8ac1db;
}
.content div {
   width: 910px;
   height: 40px;
}
/*选择器有优先级，id>class>元素，而派生选择器
的优先级是它所包含的选择器的优先级的和。 */
.content .data {
   height: 310px;
}

/*2.设置背景色和背景图*/
body {
   background-color: #0EA8D8;
}
.logo {
   background-image:
       url(../img/top_bg.png);
}
.nav {
   background-color: #0488BB;
}
.core {
   background:
       url(../img/content_bg.png)
       repeat-x top;
}
.content {
   background-color: #e8f3f8;
}

/*3.设置字体样式*/
.logo {
   text-align: right;
   line-height: 61px;
}
.logo a {
   margin-right: 40px;
   color: #FFF;
   font-size: 14px;
   text-decoration: none;
}
.logo a:hover {
   font-weight: bold;
}
.copy p {
   font-size: 14px;
   color: #FFF;
   text-align: center;
   /*border: 1px solid yellow;*/
   height: 25px;
   line-height: 25px;
}

HXX_M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础入门

CSS:层叠样式表（给HTML"化妆"）样式：定义如何显示HTML，通常存储在样式表中一.样式CSS/* CSS中的注释是这样的 *//*将页面的所有h2变蓝 */ h2 { color:blue; }p{ color:#ff80c0;}
复制链接

扫一扫