CSS笔记

最新推荐文章于 2024-08-13 16:49:21 发布

Rain_zlh

最新推荐文章于 2024-08-13 16:49:21 发布

阅读量108

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Miku_zlh/article/details/107530646

版权

CSS学习

CSS的作用:

CSS给网页进行样式的开发以及进行布局

CSS的声明:

CSS声明学习：
1.在head标签中使用style标签声明:
作用:此声明一般声明当前网页的公共样式或者给某个标签的单独样式
2.在标签上使用styLe属性进行声明:
作用:此声明会将css样式直接作用于当前标签
3.在head标签中使用Link标签引入外部声明好的CSS文件
作用:此声明相当于调用，解决了不同网页间样式重复使用的问题
一次声明，随处使用
问题:
不同的声明给同一个标签操作了同一个样式，会使用谁的?
如果Css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。

Util/css_util.css内文件:

hr{
    width: 50%;
    height: 20px;
    color: red;
    background-color: gray;
}

测试文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS的声明学习</title>
    <!--声明CSS代码域-->
    <style>
        hr{
            width: 50%;
            height: 20px;
            color: red;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="Util/css_util.css">
</head>
<body>
<p3>CSS的声明学习</p3>
<hr style="background-color: blue;">
<hr>
</body>
</html>

CSS的一般样式:

边框设置
border:solid 1px;
字体设置:
font-size:10px;设置字体大小
font-family: “黑体”;(设置字体的格式)
font-weight: bold; 设置字体加粗
字体颜色设置
color:颜色;
背景颜色设置
background-color:颜色;
背景图片设置
background- img:urL (图片的相对路径);
background- repeate :no-repeate;设置图片不重复
bacground-size:cover;图片平铺整个页面
高和宽设置
浮动设置
float:left/right
行高设置
Line-height:10;

CSS的选择器:

使用习惯:

使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的选择器学习</title>
    <style>
        /*标签选择器*/
        table {
            width: 300px;
            height: 200px;
            border: solid 1px;
            background-color: red;
        }

        /*id选择器*/
        #t1 {
            background-color: blue;
        }

        /*类选择器*/
        .common {
            color: red;
        }

        /*组合选择器*/
        .common, table {
            background-color: blue;
        }
        /*子标签选择器*/
        #p a{
            color: gray;
        }
        /*属性选择器*/
        input[type=text]{
            color: red;
        }
    </style>
</head>
<body>
<h3>css的选择器学习</h3>
<hr>
<hr>
<table id="t1" class="common">
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>
<table>
    <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>
<b class="common">css学习</b>
<hr>
<p id="p"><a href="">北京</a></p>
<p><a href="">上海</a></p>
<hr>
<input type="text">
<input type="password">
</body>
</html>
<!--
	CSS的选择器学习:
		标签选择器:
			标签名{样式名1:样式值1;......}
                作用:会将当前网页内的所有该标签增加相同的样式
     	id选择器:
         	#标签的id属性值{样式名1:样式值1;......}
                作用:给某个指定的标签添加指定的样式
     	类选择器:
            .类选择器名{样式名1:样式值......}
                作用:给不同的标签添加相同的样式
    	全部选择选择器:
      		*[样式名1:样式值1;......}
                作用:选择所有的HTML标签，并添加相同的样式
    	组合选择器:
         	选择器1,选择器2,......{样式名1:样式值1;......}
                作用:解决不同的选择器之间重复样式的问题
      	子标签选择器:
      		选择器1子标签选择器{样式名1:样式值1;......}
  		属性选择器:
			标签名[属性名=属性值]{样式名1:样式值1;......}
                作用:选择某标签指定具备某属性并且属性值为某属性值的标签
-->

CSS的盒子模型:

css的盒子模型学习:
div标签:
块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
特点:
默认宽度是页面的宽度，但是可以设置
高度默认是没有的，但是可以设置(可以顶开)
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的
盒子模型:
外边距:margin
用来设置元素和元素之间的间隔
剧中设置:margin: 0px auto;上下间隔位0px,水平居中
可以根据需求单独设置上下左右的外边框
边框:border
作用:用于设置元素的边框大小
可以单独设置大小左右
内边距:padding
作用:设置内容和边框之间的距离
内容区域:
作用:改变内用区域的大小
设置宽和高即可改变内容区域的大小

<html>
<head>
    <meta charset="UTF-8">
    <title>CSS的盒子模型学习</title>
    <style>
        img {
            width: 49.69%;
        }

        #showdiv {
            border: solid 3px blueviolet;
            width: 40%;
            height: 213px;
            margin-bottom: 10px;
            margin:  100px auto;
            padding: 20px;
        }

        #div01 {
            border: dashed 3px orange;
            width: 40%;
            height: 213px;
            margin-left: 100px;
        }

    </style>
</head>
<body>
<div id="showdiv">
    <img src="../img/1.jpg" alt="">
    <img src="../img/1.jpg" alt="">
</div>
<div id="div01"></div>
</body>
</html>

CSS的定位:

css的定位学习:
position
相对定位:relative
作用:相对元素原有位置移动指定的距离(相对自己原有的位置)
注意:其他元素的位置是不改变的
绝对定位:absolute
作用:可以使用元素参照界面或者相对父元素来进行移动
注意:如果父级元素成为参照元素,必须使用相对定位属性
默认情况下是以界面为基准移动的
固定定位:fixed
作用:将元素固定现在页面的指定位置,不会随着滚动条的移动而改变位置
以上定位都可以使用top,left,right,bottom来进行设置
z-index:此属性是用来声明元素的显示级别的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的定位</title>
    <style>
        #div01 {
            border: solid 2px orange;
            height: 200px;
            width: 800px;
            margin-bottom: 10px;
            margin-top: 50px;
            position: relative; /*给div01添加相对定位成为其子元素绝对定位的参照*/
        }

        #showdiv {
            border: solid 3px;
            height: 50px;
            width: 50px;
            position: absolute;
            top: 10px;
        }

        #div02 {
            border: dashed 2px coral;
            height: 200px;
            width: 800px;
            margin-bottom: 10px;
            position: relative;
            z-index: 3;
            left: 50px;
            top: 100px;
            background-color: coral;
        }

        #div03 {
            border: solid 2px #FF7F50;
            height: 200px;
            width: 800px;
            background-color: gray;
            position: relative;
            z-index: 4;
        }

        #div04 {
            border: solid 3px blueviolet;
            height: 50px;
            width: 50px;
            position: fixed;
            top: 270px;
            right: 10px;
        }
    </style>
</head>
<body>
<div id="div01">
    <div id="showdiv">

    </div>
</div>
<div id="div02"></div>
<div id="div03"></div>
<div id="div04"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

Rain_zlh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS学习CSS的作用:CSS给网页进行样式的开发以及进行布局CSS的声明: CSS声明学习： 1.在head标签中使用style标签声明: 作用:此声明一般声明当前网页的公共样式或者给某个标签的单独样式 2.在标签上使用styLe属性进行声明: 作用:此声明会将css样式直接作用于当前标签 3.在head标签中使用Link标签引入外部声明好的CSS文件作用:此声明
复制链接

扫一扫