CSS常用样式_css样式-程序员宅基地

技术标签: css  

目录

引入CSS样式的三种方式

内联(行内)样式:

内部样式表:

外部样式表:

基础选择器

        标签选择器     标签{各种样式}

        类选择器        .类名{各种样式}

        id选择器        #id号{各种样式}

字体样式(font)

文本样式

鼠标样式(cursor)

背景样式(background)

列表样式(list-style)

CSS伪类 

CSS伪元素

盒子模型

高级选择器

/* 交集选择器

/* 并集选择器

/* 后代选择器

 /* 子元素选择器

/* 属性选择器

标准文档流

    块级元素

行内元素

定位流  

position 定位属性:static(默认值,没有定位)        fixed        relative        absolute

 z-index属性:调整元素定位时重叠层的上下位置,z-index值大的层位于其值小的层上方默认为0

浮动流


引入CSS样式的三种方式

内联(行内)样式:

        写在标签的属性里面,直接使用

内部样式表:

        样式写在<style></style>标签之间

外部样式表:

        为一个独立的.css文件,需要通过<link href="路径"/>导入以便使用

优先级:(就近原则)内联样式>内部样式表>外部样式表

基础选择器

        标签选择器     标签{各种样式}

        类选择器        .类名{各种样式}

        id选择器        #id号{各种样式}

字体样式(font)

font-weight        bold定义粗体字符

                        100-900(粗细程度)

font-style字体风格                normal默认/italic斜体

font-family字体类型                隶书、楷体等

font-size 字体大小

文本样式

color        设置文本的颜色

line-height        设置文本的行高

text-indent        设置首行文本缩进

text-align        设置元素水平对齐方式

        left(左对齐)   center(居中)   right(右对齐)

text-decoration        设置文本的装饰

        none:默认,标准文本

        underline:定义文本下划线

        overline:定义文本上划线

        line-through:定义穿过文本的一条线

鼠标样式(cursor)

        01        default默认光标                02        help指示可用的帮助

        03           text      指示文档                04        crosshair鼠标呈现十字状

        05         wait       等待状态               06         pointer超链接指针

背景样式(background)

        background-color        背景颜色

        background-image:url(图片路径)        背景图片地址

        background-repeat        背景重复方式

                no-repeat不重复        repeat-x水平重复       epeat-y垂直重复      repeat默认重复

        background-position        背景定位

                水平方向:left        center        right

                垂直方向:top        center        bottom

        background-size不能在缩写里设置

        背景样式简写background:图片地址,图片重复方式,背景颜色,背景定位

列表样式(list-style)

        list-style-type

        list-style-image

        list-style-position

        列表样式简写list-style:列表标记属性,自定义列表标记图片,列表标记定位

CSS伪类 

        用法:        标签:伪类{}

常用伪类有以下四个:

link(点击访问前)       visited(单击访问后)       hover 鼠标悬浮其上      active单击未释放

CSS伪类样式设置时按照此顺序

CSS伪元素

        用法:        标签::伪元素{}

常用伪元素有以下两个:after(之后),before(之前)

盒子模型

边框(border)

border-top同时设置上边框        border-right同时设置右边框

border-bottom同时设置下边框        border-left同时设置左边框

        边框样式(border-style)

                    none:无边框

                    solid:实线边框

                    dashed:虚线边框

                    dotted:点状边框

                    double:双线边框

                    hidden:与none相同,应用于解决边框冲突

        边框颜色(border-color)

        边框粗细(border-width)

padding内边距(同分上下左右)

box-sizing: content-box(默认)

                     盒子的实际宽度和高度仅应用于元素内容,不包括内边距和边框

                     以撑开盒子的方式来调整位置

                 border-box

                     盒子的实际高度和宽度包括元素内容、边距和内边距

                     调整位置不会撑开盒子

margin外边距(分上下左右)

当margin-bottom设置的距离>当前页面margin-bottom时,右侧出现滚动条

                但margin-right不会,不会出现左右滚动条

盒子模型有四个方位的属性简写:

【4个】xxxx简写:上  右  下  左(顺时针)

【2个】xxxx简写:上下  左右

【1个】xxxx简写:上下左右

高级选择器

/* 交集选择器

        由两个选择器连接构成,选中二者范围的交集,两个选择器之间不能有空格

        第一个必须是标签选择器,第二个必须是类选择器或者ID选择器

    */ div.one{}

/* 并集选择器

        多个选择器通过逗号连接而成

        没有先后顺序

    */ h1,span,em{}

/* 后代选择器

        外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔

        使用标签选择器、地选择器、类选择器没有先后顺序

    */div span{}

 /* 子元素选择器

        通过>连接在一起而成

        仅作用于子元素

    */div>h1{}

/* 属性选择器

        选取带有指定属性的元素

        选取带有指定属性和值的元素

    */input[name]{}

标准文档流

    块级元素

    <h1> - <h6>、<p>、<div>、列表等                       

         总是在新行上开始,占据一整行
        •高度,行高以及外边距和内边距都可控制
        •宽度始终是与浏览器宽度一样,与内容无关
        •它可以容纳内联元素和其他块元素

行内元素

<span>、<a><img>、<strong>等                    

      •和其他元素都在一行上
     •高,行高及外边距和内边距部分可改变
     •宽度只与内容有关
     •行内元素只能容纳文本或者其他行内元素
     •不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用
display属性作用

  控制元素的显示和隐藏

  块级元素和内联(行内)元素的转变

none:设置元素不会被显示

inline:元素显示为行内元素

block:元素会被显示为块级元素

inline-block:行内块元素

定位流  

position 定位属性:static(默认值,没有定位)        fixed        relative        absolute

top:相对自身原来位置向顶部进行偏移

left:  相对自身原来位置向左侧进行偏移

right  相对自身原来位置向右侧进行偏移

bottom:  相对自身原来位置向底部进行偏移

            1.fixed 固定定位

            (1) 使用了固定定位的元素【会】脱离标准文档流 宽度由文字撑开,原本位置被占领

            (2) 基于 【浏览器窗口】进行偏移

            (3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

            2.relative 相对定位                       

            (1) 使用了相对定位的元素【不会】脱离标准文档流

            (2) 基于自身原来在网页的位置 进行偏移

            (3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

            3.absolute 绝对定位

            (1) 使用了绝对定位的元素【会】脱离标准文档流

            (2) 使用了绝对定位的元素以它最近的一个“已经的行为”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位

            (3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移

 z-index属性:调整元素定位时重叠层的上下位置,z-index值大的层位于其值小的层上方默认为0

浮动流

float:是css样式中的定位属性,用于设置标签对象的浮动布局。 

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

        left元素向左浮动        right元素向右浮动        none默认值,元素不浮动

clear属性

        none:默认值,允许浮动元素出现在两侧

        left:在左侧不允许浮动元素

        right:在右侧不允许浮动元素

        both:在左、右两侧不允许浮动元素

overfloat属性

        auto:自适应,如果内容被修剪,则浏览器会显示滚动条来查看超出内容

        scroll:内容会被修剪,但是浏览器会显示滚动条以便查看超出内容

        hidden:内容会被修剪,并且超出的内容是不可见的

        visible:默认值。内容不会被修剪,会呈现在盒子之外

英文单词或数字写在div里时要设置word-break:break-all

补充:

        /* 去掉标签默认边框 */

        outline: none;

        /* 去掉浏览器提供的默认样式 */

        -webkit-appearance: none;

        /* box-shadow:水平阴影距离  垂直阴影距离 阴影模糊距离 阴影颜色 */

        transition: linear 3s width;                /*transition:匀速 时间 变化的属性 */

        transform: scale(1.2);                    /*transform:scale(倍数) */

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_53988377/article/details/125858313

智能推荐

38.是否要使用不一致的数据 翻译自 吴恩达新书-Machine Learning Yearning_吴恩达 machine_learning_yearning-程序员宅基地

文章浏览阅读277次。更多好玩的机器学习教程: 进入袋马学院领一份 ,全部免费_吴恩达 machine_learning_yearning

keepalived + Nginx 搭建高可用集群_can't open pid file /var/run/keepalived.pid (yet?)-程序员宅基地

文章浏览阅读576次。一、前言本文主要在两台服务器上搭建Nginx与keepalived,实现一个高可用集群的简易版本。节点信息如下:node1192.168.100.133 Nginx、Keepalived(主)node3192.168.100.131 Nginx、Keepalived(备)需要在两台服务器上安装Nginx,Keepalived。安装配置Nginx比较简单,参考:centos7安装配置Nginx切记,最好不要使用指令yum直接安装!!!网传这是Keepa..._can't open pid file /var/run/keepalived.pid (yet?)

linux处理目录的常用命令_linux7.1 mission-control-程序员宅基地

文章浏览阅读1.2k次。接下来我们就来看几个常见的处理目录的命令吧: ls: 列出目录 cd:切换目录 pwd:显示目前的目录 mkdir:创建一个新的目录 rmdir:删除一个空的目录 cp: 复制文件或目录 rm: 移除文件或目录 mv (移动文件与目录,或修改名称) 你可以使用 man [命令] 来查看各个命令的使_linux7.1 mission-control

android虚拟摇杆_安卓虚拟摇杆-程序员宅基地

文章浏览阅读8.8k次,点赞10次,收藏42次。虚拟摇杆一资源下载效果如下:第一步:attr 中定义自定义参数,如下:&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;resources&gt; &lt;!-- areaBackground 设置区域背景 rockerBackground 设置摇杆的样式 rockerScale 设置摇杆的相对于背景的比例 rockerS..._安卓虚拟摇杆

解决VS 编译 typedef void * POINTER_64 PVOID64错误_vs2012 typedef void * pointer_64 pvoid64; 报错-程序员宅基地

文章浏览阅读1.4w次,点赞5次,收藏4次。编译时出现如下问题:c:\program files\microsoft\v6.0\include\winnt.h(236) : error C2146: syntax error : missing ';' before identifier 'PVOID64'c:\program files\microsoft\v6.0\include\winnt.h(236) : error C_vs2012 typedef void * pointer_64 pvoid64; 报错

安卓获取外部存储器图片信息_mediastore.images.media.internal_content_uri-程序员宅基地

文章浏览阅读796次。涉及到几个简单的知识点:1.使用ContentProvider管理多媒体内容:MediaStore.Images.Media.EXTERNAL_CONTENT_URI 外部存储器图片文件内容的uriMediaStore.Images.Media.INTERNAL_CONTENT_URI 内部存储器图片文件内容的uri若把Images换成Audio或Video,则表示音频或视_mediastore.images.media.internal_content_uri

随便推点

input自动填充-Autocomplete_怎么自动往input输入内容-程序员宅基地

文章浏览阅读2.3k次。input自动填充-Autocompletehttp://blog.csdn.net/linlinv3/article/details/38516661标签: jquery.autocompletejquery.autocomplete乱自动填充提示值2014-08-12 15:54 12509人阅读 评论(1) 收藏 举报 _怎么自动往input输入内容

二分图匹配的判定_二分图匹配成功检测-程序员宅基地

文章浏览阅读284次。二分图:二分图又称作二部图,是图论中的一种特殊模型。 设G=(V,E)是一个无向图,如果顶点V可分割为两个互不相交的子集(A,B),并且图中的每条边(i,j)所关联的两个顶点i和j分别属于这两个不同的顶点集(i in A,j in B),则称图G为一个二分图。简单的说,一个图被分成了两部分,相同的部分没有边,那这个图就是二分图,二分图是特殊的图。即A或B中集合元素互不相干,不能出现A中..._二分图匹配成功检测

BlockingQueue中 take、offer、put、add的一些比较_blockingqueue take-程序员宅基地

文章浏览阅读2.6w次。(转自:https://blog.csdn.net/wei_ya_wen/article/details/19344939 侵删)在java多线程操作中, BlockingQueue&lt;E&gt; 常用的一种方法之一。在看jdk内部尤其是一些多线程,大量使用了blockinkQueue 来做的。 借用jdk api解释下:BlockingQueue 方法以四种形式出现,对于不能立即满足但可能在..._blockingqueue take

python读写shp_python读取shp文件-程序员宅基地

文章浏览阅读1.4w次,点赞20次,收藏107次。近期由于工作原因需要读写shape文件,主要涉及几何数据和属性数据,在网上学习了一番,有些问题网上也没解决方案,不过最终自己还是解决了,今天有空在此作一番整理,希望与各位进行分享一、前期准备python读写shp文件所需的库为pyshp,对应的安装命令为 pip install pyshp二、写出shape文件本来想先写读取shape文件的,但是手头没有测试用的shp数据,就决定先写写出shp数据吧,这样就可以造一个读取用的测试数据了直接上代码吧,通过代码来介绍会比较方便1、需要导入库,impo_python读取shp文件

一种基于整数指令的小数进制转换算法(附mips源码)_假设没有浮点表示和计算的硬件,用软件方法采用仿真方式实现ieee 754单精度浮-程序员宅基地

文章浏览阅读938次。目录问题的提出算法思路算法伪代码算法误差分析MIPS代码这个算法在整个流程里的位置问题的提出我的计组课设 - “浮点数的表示和计算”需要假设没有浮点表示和计算的硬件,用软件方法采用仿真方式实现IEEE 754单精度浮点数的表示及运算功能,其中关于二进制转十进制小数的部分比较困难, 查询资料也无果,于是我提出了这个算法,它的特点在于:不使用浮点指令算法中的所有变量都只能存储于32位的寄存器..._假设没有浮点表示和计算的硬件,用软件方法采用仿真方式实现ieee 754单精度浮

MSP430F5529按键点灯_msp430f5529中temp什么意思-程序员宅基地

文章浏览阅读1.5k次,点赞3次,收藏9次。MSP430F5529按键点灯点灯输出配置按键输入配置输入数据程序实验现象点灯板子上P1.0 P4.7为LED灯输出配置 P1DIR |= 0X01; P4DIR |= 0x80;按键按键为P2.1输入配置 P2DIR &= ~BIT1; P2REN |= BIT1; P2OUT |= BIT1;注意:P2OUT 在输入模式下,使能R2REN后,配置为1为上拉电阻,配置为0为下拉电阻。输入数据temp=R2IN;程序#include <msp430.h&_msp430f5529中temp什么意思