关闭

CSS层叠样式表

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

简介

层叠样式表,用来表现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

关闭

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种:直接设置style的属性 某些情况用这个设置 !important值无效;直接设置属性(只能用于某些属性,相关样式会自动识别)

css样式不起作用是什么原因?

在写页面时,有时会发现自己写的css样式无法生效,我们该如何排查css样式无法生效?常见的css样式不起作用的原因有哪些呢?下面我们就来看一下css样式不起作用的原因。

VUE中CSS样式穿透

在做两款H5的APP项目,前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4(项目结构 webpack+vue+vuex+vue-router+vant+less)

关于CSS nth-child( ) 的特殊使用

最近开发的时候遇到一个样式问题,一个li列表浮动排列,需要将除了前4个其他的li的style加上margn:0; 首先想到一个一个nth-child(5)、nth-child(6)、nth-child(7)... 很快觉得这个方法太傻了=。=!

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

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

什么是层叠样式表?

层叠样式表(Cascading Style Sheets)简称CSS,它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

css怎么去掉li前的默认点?

list-style这个属性就是控制<li></li>的列表项目标记,默认是实心点,相当于加上了list-style:disc;list-style-type属性用于设置列表项标记的类型。设置list-style-type:none就可将列表项 li 默认样式移除。

css实现文本底部添加下换线

最近在开发项目,针对小程序前端,显示文本需要添加下划线问题,起初是通过border-bottom:1rpx solid #eee; 进行编写,但是总是觉得线的高度过于粗,移动端最小单位值是 1 即:1rpx 1px,高度设置0.3是不生效的

整理一些少用但又实用的 CSS 样式

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式,input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色

js和jquery设置css样式的几种方法

直接设置style的属性 某些情况用这个设置 !important值无效;直接设置属性(只能用于某些属性,相关样式会自动识别);改变class 比如JQ的更改class相关方法因JS获取不到css的伪元素

点击更多...

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