二、CSS基础及样式控制

一、CSSS基础语法

　　---> CSS选择器、内联样式、内部样式、外部样式

　　CSS 由两个主要的部分构成：选择器，以及一条或多条声明

　　　　选择器：通常是您需要改变样式的HTML元素

　　　　声明：是由一个属性和一个值组成

　　CSS常用选择器（标签 id class 属性派生）

　　CSS的引入方法（内联样式、内部样式、外部样式）

　　　　内联样式：直接在标记标签中编写css样式（针对当前标签添加样式）

　　　　内部样式：在页面head内部编写样式（针对前页面添加样式）

　　　　外部样式：为了共享（样式表写一次，可以被不同页面引用）

　　　　　　a、编写外部样式表文件（后缀为css）

　　　　　　b、需要在页面中引用

　　优先级：内联样式、内部样式、外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 外部样式 -->
    <link rel="stylesheet" href="index.css">
    <title>CSS基础知识</title>
    <!-- 内部样式 -->
    <style type="text/css">
        /* 标签选择器 */
        p{color: red;}
        /* id选择器 */
        #box{width: 100px;height: 100px;background: red;}
        /* class选择器 */
        .main{width: 100px;height: 100px;background: blue;}
        /* 派生选择器 */
        p i{font-weight: bold;font-size: 60px;}
        /* 属性选择器 */
        a[href="#"]{color: #ccc;}
        a[href="http://www.php.cn"]{color: red;}
    </style>
</head>
<body>
    <!-- 内联样式 -->
    <p style="font-weight: bold;">大家好</p>
    <div id="box"></div>
    <div class="main"></div>
    <p>学习<i>CSS</i>基础知识</p>
    <h1>学习<i>CSS</i>基础知识</h1>
    <a href="#">链接1</a>
    <a href="http://www.php.cn">链接2</a>
</body>
</html>

二、CSSS盒模型

　　---> margin、padding、元素内容边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>CSS盒模型</title>
    <style type="text/css">
        /* padding内边距设置 padding一个值：上右下左 两个值：上下 左右 三个值：上 左右 下 四个值：上右下左*/
        /* padding-left: 20px;单独设置某一个位置的内边距 */
        span{padding: 20px 30px;background: red;}
        /* margin: 30px auto;上下30 左右居中页面 */
        div{width: 100px;height: 100px;background: pink;margin: 30px auto;}
    </style>
</head>
<body>
    <span>php学习</span>
    <div></div>
</body> 
</html>

三、CSSS盒模型 ---> 边框（border）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型边框</title>
    <style type="text/css">
        /* border有三个参数第一个边框宽度 第二个边框样式 第三个边框颜色 solid实线*/
        .box{width: 100px;height: 100px;border: 1px solid #ccc;}
        /* double双线 dashed虚线 dotted点状虚线 */
        /* border-radius: 50px;圆角角度 50等于圆形 */
        #dd{width: 100px;height: 100px;border: 1px dashed #ccc;margin-top: 20px;border-radius: 50px;}
        /* 控制单边边框 */
        .main{width: 100px;height: 100px;border-top: 1px solid red;background: #ccc;margin-top: 20px;}
        /* 清除边框 */
        button{border:none ;margin-top: 20px;}
        /* 设置盒子阴影 */
        /* box-shadow 内部有四个值 第一个代表x轴的阴影位置 第二个代表y轴阴影位置 第三个代表阴影的宽度 第四个代表阴影颜色*/
        /* inset代表光晕从里面展示 */
        .shadow{width: 300px;height: 40px;box-shadow: 0px 5px 20px #ccc inset;margin-top: 20px;}
    </style>
</head>
<body>
    <div class="box"></div>
    <div id="dd"></div>
    <div class="main"></div>
    <button>登录</button>
    <div class="shadow"></div>
</body>
</html>

四、CSSS背景控制

分开写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景控制</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        /* background: #ccc;背景颜色 */
        /* background-image: ;背景图 */
        /* background-repeat控制图片是否重复，向某一个方向重复 no-repeat不平铺 repeat-y 纵向平铺 repeat-x水平平铺*/
        /* background-position: center top;控制图片位置 顶部居中 也可以用像素点或者百分比来控制 通常用作小图标定位 */
        body{background-image: url(images/傲.jpg);background-repeat: no-repeat;background-position: center top;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

复合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景控制</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        body{background: url(images/傲.jpg) no-repeat center top;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

五、CSSS中的定位

　　---> 相对定位、绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS中的定位</title>
    <style type="text/css">
        /* position: relative; 定位 relative是相对定位 absolute绝对定位 相对于他的父级或者上级设置了定位的*/
        .box1{width: 500px;height: 500px;background: #ccc;position: relative;top: 20px;left: 50px;}
        .box2{width: 300px;height: 300px;background: url(images/傲.jpg);position: absolute;right: 0px;}
        span{position: absolute;width: 100px;height: 50px;background-color: red;}
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <span>123</span>
    </div>
</body>
</html>

六、CSSS中的浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS中的浮动</title>
    <style type="text/css">
        /* float浮动 */
        ul li{list-style:none ;width: 100px;height: 40px;line-height: 40px;text-align: center;background: #ccc;margin: 0px 1px;float: left;}
        .box1{width: 200px;height: 200px;background: pink;float: right;}
        /* clear: both;清除浮动 */
        .clear{clear: both;}
    </style>
</head>
<body>
    <ul>
        <li>html</li>
        <li>css</li>
        <li>JavaScript</li>
        <li>jquery</li>
        <li>php</li>
    </ul>
    <div class="clear"></div>
    <div class="box1">div1</div>
    <div class="box1">div2</div>
    <div class="box1">div3</div>
</body>
</html>

posted @ 2020-08-31 17:32 百万弟弟阅读(258) 评论(0) 收藏举报

刷新页面返回顶部

百万弟弟

二、CSS基础及样式控制

公告