二.CSS页面美化和布局控制

最新推荐文章于 2024-06-14 14:36:26 发布

王大全

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量363

点赞数

分类专栏： JavaWeb学习文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_36599530/article/details/122391701

版权

JavaWeb学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.概述

cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html元素上,即时生效
使用方法:

 1. 内联样式
     在标签内使用style属性指定css代码
     <div style="color:red; ">hello css</div>
 2. 内部样式
     在head标签内,定义style标签,style标签的标签内容就是css代码
     <style>
       div{
         color:blue;
       }
     </style>
     <div>hello css</div>
 3. 外部样式 
    定义css资源文件
    在head标签内,定义link标签,引入外部的资源文件
    a.css文件:
      div{
        color:green;
      }
     <link rel = "stylesheet" href="css/a.css">
     <div> hello css</div>
     <div> hello css</div>
     除了link也可有写成
        <style>
            @import "css/a.css";
        </style>

2.语法格式

选择器:筛选具有相同特征的元素
每一对属性需要使用 ; 隔开

选择器{
  属性名1:属性值1;
  属性名2:属性值2;
  属性名3:属性值3;
}

css文件

----a.css文件----
  div{
    color:green;
  }
  p{
    color:red;
    font-size:30px;
  }

html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  //<link rel="stylesheet" href="css/a.css"> 
  <style>
    @import "css/a.css";
  </style>
</head>
<body>
  <div>hello css</div>
  <p>hello cssp</p>
</body>
</html>

3.基本选择器

优先级:id>class>元素

1. 基本选择器
         1.id选择器     id属性值  用法: #id{}
         2.元素选择器    标签名称  用法:标签名称{}  
         3.类选择器              用法: .class属性值{}
 3. 


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基础选择器</title>
  <style>
   #div1{
     color:red;
   }
   div{
     color:green;
   }
   .cls1{
     color:blue;
   }
  </style>
</head>
<body>
  <div id=div1>hello css</div>
  <p class="cls1">hello cssp</p>
</body>
</html>

4.扩展选择器

1.选择所有元素 *{}
2.并集选择器 *选择器1,选择器2{}
3.子选择器(筛选选择器1下的选择器2元素) 选择器1,选择器2{}
4.父选择器(筛选选择器2的父选择器1) 选择器1>选择器2{}
5.属性选择器:选择元素名称,属性名=属性值的元素
语法: 元素名称[属性名=“属性值”]{}
6.伪类选择器:选择一些元素具有的状态
语法: 元素:状态{}
状态: link 初始化的状态
visted :被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>扩展选择器</title>
  //<link rel="stylesheet" href="css/a.css"> 
  <style>
    //@import "css/a.css";
    div p{
      color:red;
    }
    div > p{
    border:1px solid;
    }
    input[type="text"]{
      border:8px solid;
    }
    a:link{
        color:pink
    }
    a:hover{
        color:green
    }
    a:active{
        color:red
    }
    a:visted{
        color:blue
    }
  </style>
</head>
<body>
  <div>
     <p>hello css</p>
  </div>
  <p>hello cssp</p>
  <input type="text">
   <a href="#">测试</a>
</body>
</html>

5.属性

字体文本
font-size:字体大小
color:文本颜色
text-align:对齐方式
line-height:行高
背景
background:
边框
border:边框
尺寸
width:宽度
height:高度
盒子模型控制布局
margin:外边距
padding:内边距
默认情况下内边距会影响盒子的大小
box-sizing:border-box 设置盒子属性,让width和height就是盒子最终大小
float:浮动 left right

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性</title>
  <style>
   #div1{
     color:#FF0000;
     font-size:30px;
     text-align:center;
     lline-height:100;
     border:1px solid red;//实线  红色
   }
   #div{
     height:200px;
     wight:200px;
      background:url("img/logo.jpg")  no-repeat center  ///背景图片  不重复  居中显示
   }
  </style>
</head>
<body>
  <div id=div1>hello css</div>
  <div id=div2>hello css</div>
</body>
</html>

王大全

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二.CSS页面美化和布局控制

1.概述cascading Style Sheets 层叠样式表层叠:多个样式可以作用在同一个html元素上,即时生效使用方法: 1. 内联样式在标签内使用style属性指定css代码 <div style="color:red; ">hello css</div> 2. 内部样式在head标签内,定义style标签,style标签的标签内容就是css代码 <style> div{ co
复制链接

扫一扫