CSS学习

Dakemaster

已于 2022-03-21 10:48:08 修改

阅读量138

点赞数 1

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

于 2022-03-10 11:13:08 首次发布

本文链接：https://blog.csdn.net/Dakemaster/article/details/123396326

版权

CSS学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. css介绍和引入方式基本选择器

CSS：层叠样式表
作用：定义如何显示HTML元素。


引入CSS的三种方法：
行内样式法：给指定的标签添加style属性。
例：<p style="color:blue">红色</p>

内部样式表法：
三种常用的选择器：第一种：标签选择器（选择器{}）
	              第二种：id选择器（唯一属性不允许重复 不允许用数字开头）#id
	              第三种：类选择器（class选择器）给指定标签一个class属性（可以重复）  .class
		id和class的区别：id唯一，class可以重复。
		三种的权重:id（100）>class（10）>标签（1）
<head>
	<style>
		p{}
		#对应的id
		.class对应名称
	</style>
</head>


外部样式表法：
新建样式表文件后缀为.css
引入外部样式表
<head>
	<link rel=""stylesheet" href="">
</head>
rel：表示引入属性
href：引入路径

2.CSS背景属性

设置大小和添加背景
<head>
	<SYTLE>
		width:300px;
		height:300px;
		background-color:red;
		background-image：url()；
		background-repect:no-repect ;
	</STYLE>
</head>
<body>
	<div class="box">
	</div>
</body>




width:宽度属性px
height:高度属性px
background-color:背景色 1，直接定义法：直接用对应单词
		         2，16进制法：#123123      取值范围0~f
		         3,  三原色法：rgb(1,2,3);   取值范围0~255
background-image：url()；添加背景图片 url中添加图片来源路径（如果背景图不足以覆盖整个元素，使自己重复以至于铺满整个元素）
background-repect: ;背景图的重复方式
		background-repect:no-repect ;不重复
		background-repect: repect-x；水平重复
		background-repect: repect-y;垂直重复
background-position:水平位置 垂直位置;   (位置也可以写像素：水平是向右走，垂直是向下走) 
		水平位置有三个关键词 left  center right
		垂直位置有三个关键词 top center bottom

3.CSS文本属性

color:颜色属性
font-size:30px; 字号大小
font-family: “黑体”; 中文字体需要用引号。
font-weight:bold;  字体加粗。
font-style:italic;  字体倾斜。
text-align:center;文本居中。
text-shadow：4px 4px 10px blue；添加阴影
text-decoration:underline（lin-through删除线）；添加下划线
line-height:10px;行高属性（单行文字的垂直居中）行高等于其容器高度
text-indent:--px;首行缩进
<br>换行属性

<span></span>
作用：如果p标签中有文字和整体不一致放入span里进行设置

4.CSS列表属性

li{
	list-style-type:none;（清除列表符号）
	list-style-image：url(images/图片名称); （将列表符号设置成图片）
	list-style-position:inside;(改变列表符号的位置，inside内部)
	
}

5.CSS边框属性

<head>
	<style>
	    .box{
		width:300px;
		height:300px;
		border:6px solid red;(宽度 边框线的样式solid实线dashed虚线dotted点划线  边框的颜色)
		
		}

	    
 	     
	</style>
</head>
<body>
	<div class="box">
	</div>
</body>



border:6px solid red;
(宽度 边框线的样式solid实线dashed虚线dotted点划线  边框的颜色)
border-right（top上边框bottom下边框）:（表示只有右边框）

边框在实际页面中，是占位置的


1.图片的引入，及大小的设置	
   2.进行border的设置
   3.圆角的设置
技能点 1.在HB中使用 英文的!+tab键 快速的生成 HTML结构
       2.border：大小px 颜色 style===》dotted solid double dashed; 
             是点状
             是实线
             是双线
             是虚线
       3.边框时可以单独进设置的 border-top：大小px 颜色 style；
       4.圆角 border-radius：10px；
       5.圆角可以设置四个方向：
	border-bottom-left-radius: 20px;
	border-top-left-radius: 50px;
	border-top-right-radius: 40px;
	border-bottom-right-radius: 100px;
	书写的原则为border-上/下-右/左
       6.img 为单标签 src=“”书写路径 可以设置大小
       7.图片设置大小是 width确定 height为auto可实现图片的自适应

6.CSS浮动属性

浮动的作用：让块元素并排显示（影响同级的元素）
浮动的元素不占位置（无宽度自适应）
如果元素的子集浮动，无法撑大其高度，需要设置高度


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        .a{
            width: 300px;
            height: 300px;
            background-color: red;
            float:left;
        }
        .b{
            width: 300px;
            height: 300px;
            background-color: blue;
            float:left;
        }
        .c{
            width: 300px;
            height: 300px;
            background-color: green;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>
</html>


float:left;(向左浮动)（如果想要几个块元素并排，就全部加上浮动。第二个向左浮动的元素会贴在第一个向左浮动元素的右面）
clear:both;清除浮动对其的影响（用于被影响的元素）

7.CSS内填充属性

padding:30px;（四周内填充）
作用：元素和其内容之间的间距  也需要更改宽度和高度
padding-top：30px；上填充 左右下类同

8.CSS外边距属性

外边距的作用：兄弟元素之间的间距
margin:40px;（四周都有外边距）
margin-top:40px;顶部外边距
margin:40px 10px;（如果两个值 上下相同为40 左右相同为10）
		（如果四个值 上 右 下 左  顺时针方向）

margin:0 auto;  0代表上下间距为0 auto代表左右间距相等  元素的水平居中

9.导航

ul>li*4>a
当文字在a标签中，必须选中a标签才能更改颜色
颜色具有继承性（给父级设置颜色子集也生效）

display:block；行元素转化为块元素。设置大小 独立成行


鼠标经过选择器（伪类选择器）
a（标签名称）:hover{


}
hover：鼠标经过时想要的样式

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航</title>
    <STYLE>
       *{
           margin: 0;
       }
        div{
            margin: 0 auto;
            width: 1003px;
        }
        ul{
           margin: 0;
           padding: 0;
           width: 1003px;
           height: 44px;
       }
        li{
            width: 57px;
            height: 44px;
            float: left;
            background-color: #1479d7;
            list-style: none;
            line-height: 44px;
            border:1px solid blue ;
            text-align: center;
        }
        a{
            text-decoration: none;
            color:white;
            display:block;
            height: 44px;
        }
        a:hover{
            background-color: rgba(255, 255,255,0.4);
            color: rgba(0,0,255,0.1);
        }
    </STYLE>
</head>
<body>
<div>
    <ul>
        <li><a href="">新闻</a></li>
        <li><a href="">视频</a></li>
        <li><a href="">公益</a></li>
        <li><a href="">军事</a></li>
        <li><a href="">体育</a></li>
        <li><a href="">NBA</a></li>
        <li><a href="">娱乐</a></li>
        <li><a href="">财经</a></li>
        <li><a href="">科技</a></li>
        <li><a href="">时尚</a></li>
        <li><a href="">汽车</a></li>
        <li><a href="">房产</a></li>
        <li><a href="">教育</a></li>
        <li><a href="">游戏</a></li>
        <li><a href="">文化</a></li>
        <li><a href="">星座</a></li>
        <li><a href="">更多</a></li>
    </ul>
</div>
</body>
</html>

10.元素转化

display:block；行元素转化为块元素。设置大小 独立成行

display:inline;  块元素转化为行元素。
display:none:  隐藏元素（大小内容）

11.高级选择器

后代选择器：先选其祖先级  空格 指定元素
子选择器：先选其父级>指定元素
作用：节省类名，可以给重复的类名加上不同的样式，根据其父级不同


通配符选择器：选择所有的标签。(样式重定义){必备}
*{
    margin:0;
    padding:0;

}

12.overflo属性

overflow:hidden/auto

overflow进行模块的显示和隐藏

超出部分显示auto ==》超出部分带有滚动条的显示可对滚动条进行拖拽

超出部分隐藏 hidden ==》超出部分隐藏不展示

overflow:hidden可以清楚浮动