CSS样式表知识总结

最新推荐文章于 2024-07-19 16:50:04 发布

aida1908

最新推荐文章于 2024-07-19 16:50:04 发布

阅读量101

点赞数

文章标签：人工智能

原文链接：http://www.cnblogs.com/mr171733/p/9451565.html

版权

CSS样式表知识总结

1.分类

|----内联style=“样式”，属性写道标签里面

<div style="width: 100px;height: 100px;background-color: red;">
</div>

|----内嵌嵌在页面的<head></head>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
</head>

|----外部在head标签内引入

<link rel="stylesheet" type="text/css" href="0809.css"/>

|------href引入css文件

2.选择器：样式表用来选区元素的

|----标签：根据标签名选中元素

<head>
p{
    color: red;    /*这个方法叫内嵌*/
}
</head>
<body>
<p>这里是第一行的P标签</p>
</body>

|----class，通过"."根据class名来筛选元素，可以用重复的名字

<head>
.common{
        width: 100px;
        height: 100px;
        background-color: fuchsia;
        color: blue;
}
</head>
<div class="common">
    这是我的第一个common
</div>

|----id,通过"#"根据id名来筛选唯一的元素，不可以用重复名

<head>
   #third{
                   width: 100px;
                   height: 100px;
                    background-color: green; 
            }
</head>
<body>
   <div id="third">
            123
   </div>
<body>

|----复合选择器

|----都好：并列div，span

|----空格：后代#list li

|----大于号：子元素选择器 div>p，div中所有的p元素

CSS样式

|---大小

|-----width：宽度

|----height：高度

|---背景

|----background-color：背景颜色

|----background-image：背景图片

|----background-repeat：背景平铺方式

|----background-size：背景尺寸

|----background-position：背景位置

|---字体

|----font-family：字体样式

|----font-size：字体大小

|----font-style：italic;italic倾斜

|----font-weight：粗细

|----text-decoration:{

|----underline：下划线

|----overline：上划线

|----line-through：删除线

|----none：去掉线；可以去除<a></a>超链接的下划线

}

|----color：字体颜色

|---对齐方式

|----text-align:水平对齐方式

|----line-height：行高

|----text-indent：缩进单位像素

|---line-height 与 vertical-align

|----line-height：主要作为调节文本的垂直对齐方式，通过设置行高的大小

|----vertical-align：主要作为调节行内元素（span/img/input..）的垂直对齐方式 baseline top bottom middle text-top text-bottom

|---边界边框

|-----外边距margin：

1.上右下左

2.两个属性是代表上下；左右

3.行内元素只能调整margin-left margin-right。调margin-top和margin-bottom是不管用的

|-----内边距padding：

1.上右下左

2.如果加了内边距，该元素会相应的变大

|-----border 1px solid red; 分别代表粗细线的样式颜色；

|----显示与隐藏：display:none/block;

|----列表方块<ol></ol> <ul></ul>：

1.list-style:none 将列表前面的序号去掉

2.list-style-image 可以将前面的序号变成图片

|----格式与布局：

|------位置：

1.positio：

a.fixed固定：相对于浏览器的边框进行固定

b.absolute绝对定位：相对于父级元素(浏览器；绝对定位的上级)

c.relative相对定位：相对于自身应该出现的位置

2.top：距离上边的距离

3.right：距离右边的距离

4.left：距离左边的距离

5.bottom：距离下边的距离

|------流：

1.float：

a.left向左流

b.right向右流

2.clear：

a.both清除所有的流

b.left清除左边的流

c.right清除右边的流

3.z-index分层：需要前面使用position之后才有效果，值越大越靠上

转载于:https://www.cnblogs.com/mr171733/p/9451565.html

aida1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表知识总结

CSS样式表知识总结1.分类|----内联style=“样式”，属性写道标签里面<div style="width: 100px;height: 100px;background-color: red;"></div>|----内嵌嵌在页面的<head></head><head> ...
复制链接

扫一扫