关闭

CSS层叠样式表

时间: 2019-02-02阅读: 1412标签: 样式

简介

层叠样式表,用来表现html或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号,拥有对网页对象和模型样式编辑能力,并能进行初步交互设计


使用方式(就近原则)

1 元素内嵌样式表

<a>Hello</a>

2 文档类型样式表(head里)

<style type="text/css">
    a {font-size:40px;
        color:#345cff;
    }
</style>

3 外部文档(a.css)

a {font-size:40px;
    color:#00ff29;
}
<link rel="stylesheet" type="text/css" href="a.css">


选择器

根据标签选择元素

<style type="text/css">
    a {
        font-size: 40px;
        color: #345cff;
    }
</style>
<!-- a, p, * -->

根据类选择元素

<!--class是一个全局属性-->
.class1 {}

根据id选择元素

#id1 {}

根据属性选择元素

[href] {}
[href=a.html] {}

:选择器

a:hover {} <!--当鼠标经过时的样式-->

组合选择器

选择器1,选择器2

子标签选择器

选择器1 子标签选择器


css控制边框,背景

border-width: 5px;  <!--边框宽度-->
border-color: #345cff;  <!--边框颜色-->
border-style: solid;        <!--边框线型-->
border-top-color: #fff314;  <!--单边边框颜色-->
border-radius: 15px/20px;   <!--圆角边框-->

<!--简写-->
border: 5px solid red;
border-top: 10px hidden green;

background-color: #fff314;      <!--背景颜色-->
background-image: url(a.jpeg);  <!--背景图片-->
background-repeat:              <!--重复方式-->
background-size: auto/contain/cover
background-attachment: local/fixed/

float: left|right   <!--浮动-->
line-height     <!--行高-->


css控制文本样式

text-align  对齐文本
direction   文本方向
letter-spacing word-spacing line-spacing 字符间距,单词间距,行间距
text-indent 首行缩进
text-decoration 文本装饰
text-transform  文本大小写转换

font-family 字体名称
font-size   字体大小
font-style  字体样式italic,oblique
font-variant    指定字母是否以小型大写字母显式small-caps
font-weight 字体粗细
text-shadow 创建文本阴影  10px 10px 5px red 水平偏移 竖直偏移 模糊程度 颜色


列表

li {
    list-style-type: none;  <!--不显示黑点-->
    display: inline;    <!--一行内显示-->
    float: left;    <!--菜单左悬浮-->
}


CSS使用过渡

p:hover {
    width
    transition-delay: 1s;   <!--延迟变化-->
    transition-duration: 500ms; <!--转换持续的时间-->
    -webkit-transition-duration: ;  <!--使chrome和safari可以正常使用-->
    -o-transition-duration: ;       <!--opera-->
    -moz-   ;   <!--firefox-->
    -ms-    ;   <!--ie浏览器-->
    transition-property: background-color   <!--选择渐变的属性-->
    transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out
}


CSS使用动画

p:hover {
    animation-duration: 500ms;
    animation-delay: 200ms;
    animation-name: xxx;
    animation-iteration-count: infinite;    <!--重复次数-->
    animation-direction: alternate;     <!--轮流正反向变化-->
    animation-fill-mode: forwards;      <!--停在最后的状态-->
}
@keyframes xxx {
    from {
        width: 150px;
    }
    50% {
        
    }
    75% {

    }
    to {
        width: 200px;
        background-color: #345fff;
    }
}


CSS使用变换

p:hover {
    transform:rotate(45deg);
    transform:scale(1.5);
    transform:scalex(1.5);
    transform-origin: top right;    <!--转换中心点-->
    transform-origin: 20px 40px;
    z-index: 1;     <!--显示优先级,数字越大优先级越高-->
    transition:     <!--显示加载时间-->
}


CSS盒子模型


div标签

块级标签,主要进行网页布局,会将其中子元素内容作为一个独立的整体存在

默认宽度是页面的宽度,默认高度没有

如果子元素设置了百分比的高或宽,是div的百分比

定位

position: releative;

left: 50px;

position: absolute;

父级元素设置相对之后,子级元素相对父元素定位

position: fixed;


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1936

关闭

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容

vue单页面修改样式无法覆盖问题

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。

为什么css初始化中不推荐使用 *(通配符)

在进行css初始化的时候,因为我们图方便而使用了*{},为什么不推荐使用:这里我个人理解涉及到css权重问题,举例说明:

css强制换行

强制换行用white-space的normal,pre-wrap,pre-line换行,即使有overflow: hidden; text-overflow: ellipsis;也不影响换行。

CSS设置滚动条样式

scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。scrollbar corner为横向和竖向的交叉角区域

外部css不起作用怎么解决?

一般而言,使用前两种方式都很少有问题,但在实际开发过程中,为了方便维护,HTML一般都是外部导入CSS样式的。因此,新手使用CSS样式遇到的问题一般是外部导入的CSS不起作用。

css z-index的层级关系

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。

CSS如何给文字添加下划线样式?

在CSS中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

CSS样式更改_2D转换

这篇文章我们来介绍下CSS样式更改中2D转换的基础用法。内容包括:元素位移translate(左边,顶边)、元素旋转rotate(角度)、元素缩放scale(宽度倍数,高度倍数)、元素翻转给定的角度 skew(x,y)

Vue样式穿透

在开发中修改第三方组件样式是很常见,但由于 scoped 属性的样式隔离,可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用(组件样式污染、不够优雅)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!