我的第十七篇博客---CSS

css选择器:
将css添加到<head>与</head>之间,并用<style></style>标记声明的一种样式。
语法如下:
<style>
这里写css内容
</style>

全局选择器:设置所有标签使用同一样式,用*表示
语法:*{}
例如:*{color:red;} 所有字体都为红色

标签选择器:用于声明标记采用的样式
语法:p{color:red;} 所有p标签里的文字都是红色

类选择器:用来为一系列标签定义相同的样式
语法: .类名{color:red;}
例如:
<p class="a">我是你爸爸</p>
<div class="a">我是你爸爸</div>
在<style> .a{color:red;} </style> p标签和div标签里的文字都为红色

ID选择器:ID选择器和类选择器类似,但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
id选择器的语法:#id名{}
例如:
<style> #a{color:red;} </style>
<p id="a">我是你爸爸</p>
该p标签里的文字为红色

伪类选择器:
a :link(未被访问过,访问之前的状态)
a :hover(鼠标滑过)
a :active(鼠标按下)
a:visited(访问过后)
伪类选择器:用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上
我们这里只要求掌握超链接的伪类a:hover
伪类选择器的语法:
a:hover{}

优先级:
id>class>标签>全局

css属性:

文字属性:
1、color字体颜色
color属性:用于定义文字的颜色

2、font-size字号
font-size属性:设置文字的大小。常用的网页文字大小有:12px(正文),14px(标题)

3、font-family字体
font-family属性:设置文字字体,如宋体,黑体,隶书等

4、font-weight字体加粗
font-weight属性:设置文字的粗细程度,blod设置粗体,normal将粗体改为正常字体

5、font-style字体是否倾斜
italic倾斜
normal正常

段落属性:
1、文字修饰(text-decoration)
underline 下划线
overline 上划线
line-through 删除线
none 无修饰
例如:
<p text-decoration:underline;}

2、水平对齐方式(text-align)
text-align属性:设置文本的水平对齐方式。属性值可以设置为left、center、right等,即如何为文本设置左对齐、居中对齐和右对齐,其他值不要求掌握。
如<h2 text-align:center;>

3、文本缩进(text-indent)
text-indent属性:设置文本块中首行的缩进,属性值可设置为数值加单位或者用em设置缩进几个字,百分比和复制不要求掌握。
如:p{text-indent:24px;} 或 p{text-indent:2em;}

4、文本行高(line-height)
line-height属性:设置行间距,即行高。属性值可设置为数值加单位,百分比和负值,负值不要求掌握
如 p{line-height:25px;}

背景属性 background
背景属性包含背景色、背景图、背景重复、背景位置、背景附件和背景复合属性等
背景颜色:background-color
背景图片:background-img:url(路径);
背景重复:background-repeat:
属性值:repeat/no-repeat/repeat-x/repeat-y
背景位置:background-position:水平 垂直;
可以取得值为关键字,数值,百分比
水平:left,center,right
垂直:top,center,bottom
背景附件:(背景是否滚动 属性值:scroll(默认) 滚动 fixed(固定))

列表案例符号的样式 list-style
list-style-type :定义列表前面的项目符号
disc 实心圆、circle 空心圆、square 方块、none 不使用任何符号

list-style-image定义列表项标志的图像
语法:list-style-image:none\路径

list-style-position列表位置
语法:list-style-position:outside(默认、更靠里面)\inside
去掉列表案例符号的代码是:ul{list-style:none}

css盒子模型:

盒模型:
1、边框属性:
边框颜色:border-color 如border-color:red;
边框样式:border-style 常用边框样式:solid实线、dashed虚线、dotetd 点线、none 取消线
边框宽度:border-width 如:border-width:3px;
border复合属性可同时设置边框的宽度、样式和颜色 如:border:1px red solid;
单独设置一条边框如:
上边框 border-top,右边框 border-right,下边框 border-bottom,左边框 border-left
如:border-bottom:1px red dashed;

2、内填充
padding:内容与边框之间的距离
设置上内填充padding-top属性,右内填充padding-right属性

3、外边距:
margin:元素与元素之间的距离
上外边距 margin-top 属性,右外边距margin-right属性,下外边距 margin-bottom属性。
用长度加单位设置属性值: margin-left:200px
在div的css选择器里写 margin: 0 auto; 设置居中效果,但是当div被定位后就不好使了

复合属性:
padding复合属性设置所有内填充属性,用法如下:
属性值为一个数值如padding:10px;表示上右下左内填充都是10px
属性值为四个时,padding:10px 20px 30px 40px;表示上10右20下30左40
margin的复合属性与padding用法一样

padding对元素宽高的影响,会增加盒子的大小
盒子的实际宽=width+padding-left+padding-right
盒子的实际高=height+padding-top+padding-bottom

box-shadow 属性盒子阴影
box-shadow:1px 2px 3px red insert
1px表示水平阴影的位置。允许负值,必写
2px表示垂直阴影的位置。允许负值 ,必写
3px表示模糊距离,可选
red 表示阴影的颜色,可选
insert 将外部阴影(outset)改为内部阴影

text-shadow属性文字阴影:
text-shadow:x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色

border-radius属性:
指定好圆角的半径,就可以绘制圆角边框了,
border-radius:20px;

gradient 渐变
所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。线性渐变和径向渐变
绘制线性渐变:
background:linear-gradient(to bottom,red,yellow);
参数值 渐变方向
to bottom 从上往下
to right 从左往右

第二个参数和第三个参数分别表示渐变的起点色和终点色

网页布局:

网页布局指的是网页内容在页面上所处位置的设计
浮动float 属性 none(不浮动) left(左浮动) right(右浮动)
设置元素向哪个方向浮动

清除浮动clear属性
clear:both;全部清除
clear:left; 清除左浮动
clear:right; 清除右浮动

display属性
display:inline 可以让块状元素变为行内显示
display:block 可以让行内元素变为块状元素

行内元素:行内元素在一行显示,只能容乃文本或者其他行内元素;不可设置宽度(设置其他样式都可)高度
常用行内元素有:
a span input I b textarea strong select label br img time
块状元素:块元素一般都独占一行,可以容纳行内元素和其他块元素,常用块级元素有:
h1-h6 p div dt dl dd ul li ol table form hr

overflow属性:这个属性定义溢出元素内容区的内容会如何处理
1、overflow:hidden 隐藏,
2、overflow:visible 可见(默认值)
3、overflow:auto 自动,如有溢出内容,相应盒子便会显示滚动条

visibility 属性规定元素是否可见
使h2元素不可见:
h2{visibility:hidden;} (占位隐藏)
display:none (不占为隐藏)

定位:

定位:
1、psoition
absolute 绝对定位 如果父级元素没有相对定位 相对于浏览器窗口定位
relative 相对定位 相对于自己去定位,会保留原来空间
fixed 固定定位 (不常用)
static 静态定位(默认)

div{position:relation; top:100px}盒子位置向下移动了100px

绝对定位 如果父级元素没加相对定位 子元素的绝对定位就是相对于浏览器窗口 加了就是相对于父级元素

position
relative 相对 1、相对于自己定位
2、保留原来空间
absolute 绝对 1、 定位:父级元素设有相对定位 ,相对于父级元素
父级元素没有设相对定位,相对于浏览器窗口
2、不会保留原来空间(浮动一样)

元素的层叠顺序
1、z-index属性:设置元素的层叠顺序,属性值为无单位的整数值,值较大的元素会叠在值较小的元素之上
2、元素可拥有负的z-index属性值,默认是:auto,默认层是0
3、当没有设置z-index属性或层数相同时,后面的元素显示在上面
4、z-index的属性值,只能为整数,正整数,0,负整数
5、z-index值越大越靠上

原文地址:https://www.cnblogs.com/sll-csdn/p/10925993.html

时间: 2024-10-10 04:46:20

我的第十七篇博客---CSS的相关文章

我的第一篇博客--css 清除浮动

第一篇博客,请大家多多指教! 今天我浅谈对网页编写css中清除浮动几种方法,众所周知在网页编写中,在遇到内容左右布局时,我们必须要使用浮动才能使元素左右排列,而这时 当我们需在下面的网页中继续布局时,浮动就会给下面的元素带来影响,就需要使用清除浮动了. 清除浮动作为每一个Web前端必须掌握的技能,在逆战班学习中我想说说我对不同清除浮动方法的理解和使用方式,下面来介绍一下几种清除浮动的 方法:1.当解决上下排列的情况时,利用clear清除float,具体值为:right.left.both:我在使

我的第二十七篇博客---beautifulsoup与csv操作方法

Beautiful Soup和lxml一样,也是一个HTML/XML的解析器,主要的功能也是如何解析和提取HTML/XML数据lxml只会局部遍历,而Beautiful Soup是基于HTML DOM的,会载入整个文档,解析整个DOM树,因此时间和内存开销都会大很多,所以性能要低于lxml/Beautiful Soup 用来解析HTML比较简单,API非常人性化,支持CSS选择器,Python标准库中的HTML解析器,也支持lxml的解析器 bs4的基本使用实:首先必须要导入bs4库from b

我的第一篇博客 —— 用 js 和 css 简单实现瀑布流布局

一个拖延症晚期患者的自述: 注册了博客快一个月了,终于要迎来我的第一篇博客了哈哈哈!!! 刚注册的时候,满脑子要频繁更新,扩充自己的知识库,一到真正落实,就不得不为懒惰屈服,还好有了学习计划,以后应该会每周一更(不更当我没说).当然了,肯定是希望被更多人看到,帮助到大家,如果没人看的话就当作是自己的积累与记录吧! 还有,我目前工作是前端工程师,还是一名刚入行不久的菜鸟哈哈哈!!!现在主要目标是先把前端知识巩固好,再逐步往全栈领域发展(毕竟装13是我一生的职责). 所以,请各位大佬们多多指教,如果

小白神器 - 一篇博客学会HTML

小白神器 - 一篇博客学会HTML 一. 简介 1. HTML 定义 htyper text markup language  即超文本标记语言. 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语言. 2. 标签定义和属性 是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头. 标签不区分大小写.<html> 和 <HTML>. 推荐使用小写. 标签分为两部分: 开始标签<a

一篇博客分清shell中的状态返回值-return-break-continue-exit

一篇博客分清shell中的状态返回值-return-break-continue-exit 一.break.continue.exit.return的区别和对比 条件与循环控制及程序返回值命令知识表 命令 说明 break n 如果省略n,则表示跳出整个循环,n表示跳出循环的层数 continue n 如果省略n,则表示跳出本次循环,忽略本次循环剩余代码,进入循环的下一次循环.n表示退到第n层继续循环 exit n 表示退出当前shell程序,n为上一次程序执行的状态返回值,n也可以省略,在下一

第一篇博客——基于数组的优先队列(java版)

看过园子里和CSND上那么多大牛精彩的博客后,早就按捺不住想亲手写上几篇.奈何每次坐在电脑前准备敲字的时候,立马赶到浑身不自在,无从下手.实在是因为自高考之后,大学以来,本人几乎就再没动笔写过一篇文字,写作水平退化实在严重.今天鼓起勇气开始写作博客,一方面希望通过多写慢慢地找回写作的感觉,一方面也希望通过博客和大家多多交流,共同进步. 既然是第一次试手,就写个简单易懂的内容——优先队列. 话不多说,先上代码. 1 /** 2 * @author Mr Left 3 * @version 1.0

一篇博客让你了解RxJava

RxJava可以说是2016年最流行的项目之一了,最近也接触了一下RxJava,于是想写一篇博客,希望能通过这篇博客让大家能对其进行了解,本篇博客是基于RxJava2.0,跟RxJava1.0还是有很多不同的 基础知识 RxJava的核心就是"异步"两个字,其最关键的东西就是两个: Observable(被观察者) Observer/Subscriber(观察者) Observable可以发出一系列的 事件,这里的事件可以是任何东西,例如网络请求.复杂计算处理.数据库操作.文件操作等等

[iOS]关于 App 混合(Hybrid)开发的优化,包括H5、Weex等(本篇博客主要针对 iOS 应用讲解,但该思想同样适用于Android)

我们知道混合开发,可以节省很多成本(时间成本,经济成本等等),所以有很多公司比较钟爱这种开发形式,今天所讲的优化方式,也是我在我们公司的应用中实际用了的,而且我写的这个优化的 SDK 已经开源到 github 上了,有兴趣的同学可以下载来看一下,有不足的地方欢迎指正.这里给出链接:https://. 转载请注明出处:http://www.cnblogs.com/shisishao/p/6830736.html -.首先,先介绍下什么是混合开发: 我们通常把移动开发分为Web.Native和Hyb

一篇博客彻底了解Android广播机制

首发于http://blog.csdn.net/pwiling/article/details/47682413,禁止转载 之前数次在程序中碰到Android广播,总是有这个疑问:往往是在发送广播的activity里面进行动态注册,动态注册必须要获得BroadcastReceiver对象,既然我们已经获得了广播接受器的对象,为何还要发送广播,直接用广播接收器的对象调用里面的相关逻辑处理的方法,不行吗?为什么还要绕这么一大圈用广播呢? 以前都是走马观花,这次弄清楚了.在解答这个问题之前,我们首先来