欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css入门

程序员文章站 2022-06-23 22:44:45
css 层叠样式表,作用是为标签加效果 基本选择器 元素选择器 标签名称{css属性:值} id选择器 id{} 类选择器 .class1{属性:值} 属性选择器 后代选择器 html代码: 组合选择器 div,a{ color: yellow;} css样式引入方式 head标签中引入 外部文件引 ......

css

层叠样式表,作用是为标签加效果

<div style="background: red">123</div>

基本选择器

元素选择器

标签名称{css属性:值}

div{width:100px;}

id选择器

id{}

html代码:
<div id="d1">

    </div>

css写法:
    #d1{
        background-color: green;
        width: 100px;
        height: 100px;
    }

类选择器

.class1{属性:值}

html代码:
<div id="d1" class="c1">
    baby
</div>

<div id="d2" class="c2">
   热巴
</div>

<div id="d3" class="c1">
    唐艺昕
</div>


css写法:
.c1{
    background-color: green;
    width: 100px;
    height: 100px;
}

属性选择器

html代码:
<div id="d5" class="c1" xx="ss">
    baby
</div>

<div id="d2" class="c2" xx="kk">
   热巴
</div>

css写法:
[xx]{
           /*属性查找*/
           background-color: green;
    width: 100px;
    height: 200px;
       }


        [xx='ss']{
            /*属性带属性值查找*/
    background-color: green;
    width: 100px;
    height: 200px;
}

后代选择器

html代码:

div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2" class="c2" xx="kk">
        <a href="http://www.baidu.com">热巴</a>
    </div>
    <div id="d3" class="c1">
        唐艺昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>
div a{    color: yellow;}

组合选择器

div,a{ color: yellow;}

html代码:
div id="d1" class="c1" xx="ss">
        <span>
            <a href="http://www.baidu.com">baby</a>
        </span>
    </div>
    <div id="d2" class="c2" xx="kk">
        <a href="http://www.baidu.com">热巴</a>
    </div>
    <div id="d3" class="c1">
        唐艺昕
    </div>
    <a href="http://www.baidu.com">xxxxxxx</a>
    
    
css代码: 
注意:a标签字体颜色设置,必须找到a标签才能设置
    #d1 a,#d3 a{
        background-color: pink;
        color:yellow;
    }

css样式引入方式

head标签中引入

<style>
    /* 选择器{css属性名称:属性值;css属性名称:属性值;} */
    div{                               用了基本选择器中的元素选择器
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
给所有div标签加样式

外部文件引入

(工作中常用的)

创建一个css文件,stylesheet文件,比如test.css文件。里面写上以下代码
div{
    /* css注释 */
    width: 200px;
    height: 200px;
    background-color: red;
}

在想使用这些css样式的html文件的head标签中写上下面的内容
<link rel="stylesheet" href="test.css"> href对应的是文件路径

内联样式

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

multiple="multiple"?

css样式相关

display属性

改变标签属性:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏 (了解,后面用)

html代码

 <span>
        我是span标签
    </span>
    <div class="c1">
        鹅鹅鹅,曲项向天歌!
    </div>

    <div class="c2">
        白毛浮绿水
    </div>

css写法

span{display: block;}             将内联标签变成块级标签
    .c1{
        background-color: red;    内容背景颜色
        height: 100px;            内容背景高度
        width: 100px;             内容背景宽度
        display: inline;          将块级标签变成内联标签
        /*display: inline-block;*/  同时具备内联标签和块级标签的属性
         }

颜色设置

英文单词:red;
十六进制: #ff746d;
rgb: rgb(155, 255, 236);

背景颜色透明度: rgba(255, 0, 0,0.3);      
单纯的就是颜色透明度

标签透明度(例如背景图片透明度): opacity: 0.3;         
0到1的数字,这是整个标签的透明度

盒子模型

标签占空间总大小=margin+border+padding+content

html代码

<div>
    窗前明月光
</div>

css写法

div{ width: 200px;                           内容宽度
     height: 100px;                          内容高度
     background-color: rgba(255, 0, 0,0.3);  内容背景颜色
     background-image: url("fage.png");      内容背景图片 url写图片路径,也可以是网络地址路径
     margin: 10px 15px              外边距:上下 左右  距离无颜色
     border: 4px solid red;         边框:大小 样式 颜色 
     padding: 4px 2px 6px 8px;   上4右2下6左8  内边距       
}

margin 外边距

距离其他标签或者自己父级标签的距离

html代码

    <div>
        窗前明月光
    </div>
    <div class="c1">
        <div class="c2">
        </div>
    </div>

css写法

  .c1{
        background-color: red;
        height: 100px;
        width: 100px;
     /*margin: 10px 15px;*/     上下10,左右15
        margin-left: -10px;
    }
    .c2{
        background-color: green;
        height: 20px;
        width: 20px;
        /*margin: 10px 15px;*/
        margin-left: 20px;
    }

让外边距为零

body{
    margin: 0;
}

border 边框

html代码

<div>
    窗前明月光
</div>

css写法

边框简写方式,对四个边框进行设置
<div style="border:1px solid red; ">           /*宽度/样式/颜色*/
窗前明月光
</div>                                         

order-left: 1px solid green;  单对左边边框设置   
border-top: 1px solid blue;   上边边框       


细写
border-width: 5px;  边框宽度
border-style: dashed;  边框样式
border-color: aqua; 边框颜色

padding 内边距

内容和边框之间的距离

html写法

<div style="padding:1px solid red; ">   /*宽度/样式/颜色*/
窗前明月光
</div>

padding: 6px 8px;           上下6左右8
padding: 4px 2px 6px 8px;   上4右2下6左8
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;

content: 内容部分

背景

html代码

<div>
    窗前明月光
</div>

css写法

background-color: #ff746d;            背景颜色
background-color: rgba(255, 0, 0,0.3);背景颜色
background-image: url("fage.png");   url写图片路径,也可以是网络地址路径

background-repeat: no-repeat;        不重复
background-repeat: repeat-y;         y方向上
background-position: right top;      右上
(lift top,center top,right top,center bpttom)
background-position: 100px 50px;     离左边边多少,离右边多少  一般通过css设置

简写方式: 
    background: #ff0000 url("fage.png") no-repeat right bottom;
高度宽度
css写法:
    div{
        height: 100px;
        width: 100px;
        background-color: pink;
    }
    span{                        !!!行级标签不能设置高度宽度
        height: 100px;
        width: 100px;
        background-color: green;
    }

可以设置百分比,会按照父级标签的高度宽度来计算

<div class="c1"><div class="c2">234</div></div>

css写法:
        .c1{
        width: 200px;
        height: 100px;
        background: red;
    }
        .c2{
            width: 50%;
            height: 50%;
            background: gold;
        }
字体相关

html代码

<div>
    窗前明月光
</div>

css写法

font-size: 50px;    /* 默认字体大小是16px */
color:green;        /* 字体颜色 */

font-family:        '楷体', '宋体';      浏览器如果不支持第一个选第二个。。。

font-weight: 400;    /* 字体粗细 100-900,默认是400 */
字体对齐

字体对齐

html代码:
    <div>
        窗前明月光
    </div>

css写法

div{  height: 100px;
      width:200px;
      background-color: yellow;
      text-align: center;  水平居中  
      line-height: 100px;  和height高度相同,标签文本垂直居中
        /*垂直居中*/ 
      text-align: right;右对齐

浮动

浮动的元素,不独占一行,并且可以设置高度宽度

html代码

<div class="cc"> 

<div class="c1"></div>
<div class="c2"></div>
</div> 

<div class="c3"></div>

scc写法

body{ margin: 0; }   要浮动,先让默认为8的外边距为0

c1{
background-color: red;  height: 100px;
width: 200px;  float: left;
}
.c2{
background-color: green;  height: 100px;
width: 200px;  float: right;
}

.c3{
background-color: pink;
height: 100px;
width: 100%;}
塌陷解决

父级标签没有高度了,子标签一浮动,会让下面的标签顶上来

方式1:给父级标签加高度 不常用

方式2:清除浮动(clear属性) 不常用

.c3{
background-color: pink;  height: 100px;
width: 100%;
clear: both;    (这个标签上面不允许有浮动的元素)
}

方式3:子标签底下加一个空白的带clear属性的div标签 常用

html代码:

<div class="cc clearfix">
<div class="c1"></div>
<div class="c2"></div>
<div style="clear: both;"></div>
</div>
<div class="c3"></div>

方式4:div标签后面用after拼一个内容为空的带clear属性的块

需要先用伪元素选择器

html代码:

<div class="cc clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
<div class="c3"></div>

css代码:

.clearfix:after{
    content:'';         设置内容
    display:block;       设置块
    clear:both;         设置clear属性
}

伪元素 after

html代码:

<div>
    一段文字
<div>

css代码:

div{
    background-color:pink;
    height:100px;
    width:200px;}
div:after{
content:'?';
color:white;}

伪类 hover

html代码:

<divclass="c1">

</div>

css写法:

.c1{
    background-color:red;
    height:300px;
    width:300px;}

.c1:hover{                                     /*鼠标悬浮时设置效果*/
/*background-color:green;*/
background-image:url("a.png");
cursor:pointer;}      pointer 手
                      default 箭头,crosshair 十字,progress 箭头和沙漏

悬浮显示其他标签效果

html代码:

<divclass="c1">
<divclass="c2">  </div>

</div>

css写法:

.c1{background:black;
    height:400px;
    width:400px;
}

.c2{background:aqua;
    height:40px;
    width:40px;
    display:none;          改display为隐藏属性
}

.c1:hover.c2{
    display:block;          鼠标悬浮时显示c2,改display为块属性
}

positon 定位

做一些小的范围布局

html代码:

<div class="cc ">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
<div class="c3"></div>

static 静态定位

也就是标签默认

relative 相对定位

相对于父级标签移动,原来的位置还占着,不会造成下面的标签顶上去的情况

css代码:

position:relative;
left:100px;   离左边
top:-100px;   离上面
/*bottom:*/   离下面
/*right:*/    离右边

absolute 绝对定位

相对于父级标签移动,原来的位置不占着,会造成下面的标签顶上去的情况

css代码:

position:absolute;
top:20px;
left:80px;

fixed 固定定位

按照浏览器窗口的位置进行移动

html代码:

<spanclass="s1"><ahref="">返回顶部</a></span>

css代码:

.s1{
position:fixed;
left:40px;
bottom:20px;
}

优先级

!important>行内样式>id选择器>类选择器>标签

越精准的定位优先级越高

继承

标签

id

!important

无敌

练习(下周一之前完成即可):

通过html和css完成小米商城首页的开发,暂不需要完成动态效果,有页

面展示效果就可以()

注意:前端页面效果可以通过很多种方式实现,没有标准答案,大家

可以参考小米官网源码,也可以根据自己想法去实现