WEB前端-CSS-选择器&常用样式/属性

最新推荐文章于 2024-05-23 09:01:29 发布

白金牧场

最新推荐文章于 2024-05-23 09:01:29 发布

阅读量4.4k

点赞数 7

分类专栏： Web-Dev相关 WEB三把刀使用介绍文章标签： css html web前端选择器样式

本文链接：https://blog.csdn.net/qq_34409701/article/details/52225330

版权

Web-Dev相关同时被 2 个专栏收录

14 篇文章 2 订阅

订阅专栏

WEB三把刀使用介绍

14 篇文章 3 订阅

订阅专栏

CSS 层叠样式表

CSS（Cascading Style Sheets）是一种用来表现 HTML（标准通用标记语言）或者XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
关于更详细的 CSS介绍可参考此连接。本篇只记录最常用的几点内容。

存在形势

css一共有三中常见的存在形势：
1、元素内联：
在html的body段中，直接在标签头部属性块引入
<div style=‘key1:value1;key2:value2;’>元素内联</div>
2、页面嵌入：
在html的head段中的style块，集中引入

<head>
    <style type="text/css">
    </style>
</head>

3、外部引入：
将css单独写入一个文件，并将整个文件进入html中

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

css就是对html代码的body段中的各种标签进行装饰的语言，那么要做到精确装饰每一个标签需要做的的是：
1、定位：找到对应的标签；
2、样式：通过修改对应的属性来进行像素级的精确布局和页面美化；

选择器

选择器就是css用来定位的工具。
1、标签选择器：
<style> div{ background-color:red; } </style>
标签选择器，会对指定的标签类型进行样式装饰。
2、id选择器：

<style>#i5{ background-color:red; } </style>
<body>
<div id='i5' > </div>
</body>

id选择器，会去body块中的标签中找对应的id属性为“#”后面的id号的标签进行装饰；
3、class选择器：

.bd{ background-color:red; } 
    <div class='bd'> </div>

class 选择器是最常用的一种选择器。
4、关联选择器：

<head>
    div table tbody tr td{ background-color:red; } 
</head>
<body>
    <div> 
        <table>
            <tbody>
                <tr>
                    <td> 最终被装饰的是这个标签行</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

顾名思义，就是根据前面前面的关联选择器是多个选择器名字，排在后面的选择器对应的标签依次被包含在前面选择器对应的标签块中；
5、组合选择器：
input,div,p{ background-color:red; }
6、属性选择器：
input[type='text']{ width:100px; height:200px; }
就是在选择时，精确到标签的属性级，对属性名进行对应。

css常用样式&属性

width：宽度，可用像素设定固定宽度，也可以用百分比；

width：200px
width：100%

height：高度，一般使用像设置，或者不设，让其根据内容的多少自适应；

浏览器有宽度，但是高度理论上可以无限，因此width可以使用百分比，而高度不可以

font字体

size:设置大小，以px为单位；
weight：粗细，100-800不等，可以自行测试；
family：设置字体

            font-size:14px;
            font-weight:400;
            font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;

background 背景

background-color  背景色
背景色有三种设置方式：

    background-color:red;
    background-color:#ff0000; 
    background-color:rgb(43 23 0);

background-image 背景图像
background-repeat(no-repeat/repeat-x/repeat-y)

    background-image:url(http://www.text.org/picture/picture.jpg)   
    backgrpund-repeat:no-repeat

no-repeat：不重复
repeat-x：只在x轴上重复
repeat-y：只在y轴上重复
background-position：背景图像移动位置

多个属性可以同时设置：

<div>style="background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; height: 80px;"</div>

border ：框体

border:1px solid red;

1像素、实线 红色 的边框；
框体除了solid实线，还有dashed 、double 等，可以自己尝试
input标签是自带1px的边框，也可以通过设置0px来让input的默认边框消失；

大家可以试试以下这个代码，可以用border做出箭头的效果：

<div style=" width:0;border-bottom: 15px solid red;border-left:15px solid deeppink;border-right:15px solid yellow; border-top:15px solid transparent"></div>

margin ：外边距

margin：2px  20px 30px 0；

padding：内边距

padding：0 8px 0 px；

css的边距设置顺序是顺时针走的，也就是：top 、right、bottom、left

display 展示效果：

block（块级）  ：可以试html的内联标签加上块级属性；
inline（内联）   ：可以试html的块级标签加上内联的属性；
inline-block（既具有内联又有块级属性的效果） ：是一个html标签兼具两种属性；
none（失效）--可以用在隐藏某一层图层的效果；
original（默认）

cursor：当鼠标移到次样式装饰的标签时鼠标的形状会发生不同改变

pointer
help
wait
move
crosshair

以下为伪造超链接的例子,其他的样式大家可以自己测试
<span style="cursor:pointer;">伪超链接</span>

position：相对位移

有三种形式:
fixed：固定在屏幕某个位置，并且不随滚动条移动而移动；
absolute：固定在屏幕某个位置，但是随滚动条移动；
relative：本身木太大用处，一般跟absolute配合；
relative-absolute：relative在某个标签中定位，然后设置absolute的标签就可以相对于relative的标签来进行设置位移；

float：浮动

可以理解为 使当前图层上浮于外部标签的图层，效果会是当前图层遮盖住底层图层；
float：left；
float：right；
为了将浮动的图层跟底层图层合在一起需要在外层标签的样式中标注：
clear：both；
可以理解为清除浮动，或者图层合并；

这里有一个小案例：

        position：absolute
        top：46px；
        left：200px；
        right：10px；
        bottom：0；
        overfloat：auto/hide；

bottom:0和overfloat:auto 结合可以实现，当当前小框体的内容超出显示器的屏幕高度时，会在当前框体内出现滚动条，而其他位置的框体不动；

透明度

有两种设置方式，透明的程度从0~1，以十分位的小时来控制，具体效果大家可以自己测试；

            opacity:0.6
            background:rgba(0,0,0,.6)

其他

：hover 当鼠标移动至此标签时，图层发生的变化，相当于一个条件判断或者触发器；
：after 结合float使用，可以代替clear ：both；
：before 结合float使用，可以代替clear ：both；
visibility: hidden：占位不显示内容；这里是相对于display:none的失效效果的补充。
text-align: center;内容居中；

推荐一个常用符号大全：font awesome，主流网站的小图标都是引用这个第三方包的，下载下包之后，可以放到app的同级目录解压，并在html中应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="plugins/font-awesome-4.6.3/css/font-awesome.css"/>
    <style>
      .b3{
            width:0;
            border-top:6px solid gray;
            border-right:6px solid gray;
            border-bottom: 6px solid transparent;
            border-left:6px solid transparent;
        }
    </style>
</head>
<body>
    <i style="color:red;" class="fa fa-star" aria-hidden="true"></i>
    <i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>
    <div class="b3">
    </div>

</body>
</html>

最后给大家附上w3c的学习手册。

白金牧场

关注

7
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
WEB前端-CSS-选择器&常用样式/属性

CSS 层叠样式表 CSS（Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言）或者XML（标准通用标记语言的一个子集）等文件样式的计算机语言。关于更详细的CSS介绍可参考此连接。本篇只记录最常用的几点内容。存在形势css一共有三中常见的存在形势： 1、元素内联：在html的body段中，直接在标签头部属性块引入 <div s
复制链接

扫一扫