Web前端(2)-CSS基础

59 阅读 0 评论 39 点赞

我是靠谱客的博主如意乌龟，最近开发中收集的这篇文章主要介绍Web前端(2)-CSS基础，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

CSS：层叠样式表
作用：美化网页

一：CSS的使用方式

使用方法1：写在标签内

<p style="color: red">让我看看写了什么</p>

使用方法2：写在style标签内

   <style>
        p{
            color: blue;
        }
    </style>
</head>
<body>
<p >让我看看写了什么</p>

使用方法3：创建CSS文件（stylesheets）
link,TAB,参数内写入地址

   <link rel="stylesheet" href="CSS随手.css">
</head>
<body>
<p >让我看看写了什么</p>

二：CSS选择器

选择器使用时为了减少混淆可以套用
大选择器.小选择器.
.class1 .class2 li{}

（当数量过多，又要根据情况进行筛选，可以用选择器）

1：部分选择器的优先级，id选择器>class选择器>标签选择器

2：ID选择器：
在标签内设置id=""
关键词：#，然后加上id名加{}，在大括号内进行美化

3：class选择器：
同样的，标签内设置class=""
关键词：.，然后加上class名，在大括号内进行美化

二者对比：id是唯一的，优先级别高，class可以同时作用多个标签

        .p_12{
            color: red;
        }
    </style>
</head>
<body>
<div>
<p class="p_12" id="a_12">明月几时有？把酒问青天。</p>
<span class="p_12">北国风光，千里冰封，万里雪飘。望长城内外，惟余莽莽；大河上下，顿失滔滔。</span>
<p >君不见，黄河之水天上来，奔流到海不复回。</p>
<span class="p_12">爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符。</span>
<p >忽逢桃花林，夹岸数百步，中无杂树</p>
<span>怒发冲冠，凭栏处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。</span>
</div>

4：复杂选择器：
群组选择器：在头部style进行：
关键：，
p，span{}

后代选择器：
在div标签内设置 id，
然后在style内美化
关键：#id span{}

子代选择器：
关键:#id>span
表示选择div下一级为span的部分而不是所有的span部分

兄弟选择器：和他相同
关键词：#id~p

相邻选择器：
关键词：#id+p

五：伪类选择器：
先建立一个超链接
以下依次表示：
未访问时颜色
访问后颜色
鼠标滑到该位置颜色
鼠标点击后颜色

   <style>
a:link{
    color: red;
}
a:visited{
    color: aqua;
}
a:hover{
    color: yellow;
}
a:active{
    color: cadetblue;
}
    </style>

通过在标签内添加选择器可以细化控制
设置字体，控制表格，高度，宽度，透明度（opacity）

三：字体以及大小

在style，设置type
如上，首先要进行选择，#加上div内的id
宽度：width=单位px
高度：height=单位px
边框：border：1px solid red
圆角框：border-radius：px

斜体：font-style：italic
小的大写：font-variant:small-caps
字体加粗：font-weight：bold
字体大小：font-size：px
设置字体：font-family：

简化(按如下顺序排列)：font：italic small-caps bold px 宋体

四：操作文本：

关键词：text
对齐方式:text-align
首行缩进:text-indent:单位em（每1em表示一个汉字）
去下划线:text-decoration:none
加下划线:text-decoration:underline
删除线：line-through
字距:letter-spacing:em
词距：word-spacing:em
行距：line-height:px

五：操作背景

头部文件中写body：
背景颜色：background-color:
背景图片：background-image:
图片平铺：background-repeat:no-repeat
background-repeat:repeat-x 横平铺
background-repeat:repeat-y 纵平铺
图片占屏幕百分比： background-size:%
定位：background-position：% px（两个参数先左右后上下，一个参数上下左右）

简化(按顺序)：background：url("") color no-repeat % px