css

0919lxx.

于 2022-07-17 17:24:31 发布

阅读量149

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_72493106/article/details/125834236

版权

css ：层叠样式表作用：页面美化

name：用在表单控件里，专门给后端程序员进行使用。

一、行内样式
style="css属性：属性值；css属性：属性值"

二、内部样式
1.标签选择器：
格式:
<head>
<style>
   标签名 {
       属性名:属性值;
       属性名:属性值;
       ....
       }
   </style>
</head>

2.类选择器：兼具了行内样式和标签选择器的优点，开发中使用的最多
格式:
<head>
<style>
   .自定义类名 {
       属性名:属性值;
       属性名:属性值;
       ....
       }
   </style>
</head>
使用：
<标签 class="自定义类名">

3.id选择器：与类选择器相同很少使用
格式:
<head>
<style>
   #自定义ID名 {
       属性名:属性值;
       属性名:属性值;
       ....
       }
   </style>
</head>
使用：
<标签 id="自定义ID名">

三、外部样式
1，创建一个css文件。
2，在css文件里头写代码使用。标签选择
3，在html文件里关联css文件。
<link rel="stylesheet" href="./css/index.css">

伪类选择器：
   默认样式
   a{
   color:
   text-decoration:
   }
   访问过的样式
   a:visited{
   如果visited没有设置下滑线样式，使用默认样式
   }

   鼠标划过样式
   a:hover{
   }

   鼠标点击的样式
   a:active {
   }

css 常用属性
color：颜色值; 设置文字颜色
font-weight:bold; 设置文字粗体
font-style:italic; 设置文字斜体
font-famliy: "字体的名字"; 设置文字字体
font-size: **px; 设置文字的字号
text-align:left/center/right; 设置文字对齐方式
text-decoration:underline; 设置文字有下划线
text-decoration:none; 取消划线
border:1px red solid; 设置四周的外边框。
border-bottom、border-top、border-left、border-right
background-color:#FFF; 设置背景颜色
background-image:图片; 设置背景图片
list-style-type:none; 去掉列表项的默认开头符号
list-style-image:图片; 自定义列表项的默认开头符号的图片

盒子模型
盒子本事+内边距+外边距+边框

1.盒子本身的宽和高
width height
2.内边距：盒子本身到边框的距离：调整内容在盒子中的位置。
padding
3.边框
border
4.外边距:它不影响盒子的可见框大小，但影响盒子的位置
margin

<span>:标签本身不带任何样式和属性，专门配合css进行使用。

背景图片：
background-image: url(./images/v.png);
不平铺：
background-repeat: no-repeat;
调整背景图片的位置值1：x轴值2：y轴
background-position: -500px 700px;

0919lxx.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css

list-style-image图片;2.类选择器兼具了行内样式和标签选择器的优点，开发中使用的最多。list-style-typenone;标签本身不带任何样式和属性，专门配合css进行使用。background-image图片;2.内边距盒子本身到边框的距离调整内容在盒子中的位置。css属性属性值"font-famliy"字体的名字";font-size**px;font-styleitalic;4.外边距它不影响盒子的可见框大小，但影响盒子的位置。...
复制链接

扫一扫