css

最新推荐文章于 2025-03-06 12:11:45 发布

Slyune

最新推荐文章于 2025-03-06 12:11:45 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

分类专栏： php_css

本文链接：https://blog.youkuaiyun.com/Slyune/article/details/84719035

php_css 专栏收录该内容

1 篇文章

订阅专栏

CSS基础

元素用html标签声明,用CSS修改样式

css样式的声明

内联声明:写在style属性中

内部申明:写在style标签中

外部申明:在head标签中使用link标签加载css样式文件到html中

替换元素

元素的内容由标签的属性来设置,标签就是一个占位符,默认导入的资源是做为行内元素,替换元素如果是可视元素的话,此元素就是一个行内块

非替换元素

元素的内容由用户直接提供或者来自文档自身

基础选择器

元素选择器

h1{ color:red }

ID选择器

#id{ color:red }

类选择器

.class{ color:red }

元素选择器

层级选择器(父子选择器)

ul li{ color:red }

ul *{ color:red } 通配选择器,选择ul下的所有li标签

子元素选择器

ul > li {color : red}

相邻兄弟选择器

h1 + h2{ color:red} 选择h1标签后面相邻的h2标签

h1 ~ h2{ color:red} 选择h1标签后面所有的h2标签

属性选择器

根据属性名来选择元素

*[id]{ color:red} 选择所有有id属性的元素

根据属性的名和值来选 --- 其它的都是根据这个来的

li[class = ”c”]{ color:red} 选择class=”c”的元素

根据class属性中包含指定单词的元素

li[class ~=”red”] 选择class属性中有red单词的元素

选择以”xx”开头的类样式元素

li [ class ^= “xx” ]

选择以”yy”结尾的类样式元素

li [ class $= “yy”]

选择class属性值中包括指定字母”z” 的元素

li [class *=”z”]

伪类选择器

ul: before { content:”php” 插入的是行内元素} 在ul标签前面插入

ul: after { url(../image.png) 插入图片} 在ul标签后面插入主要用来清除浮动

ul li:first-child { } 选择ul下的第一个li标签

ul li:last-child { } 选择ul下的最后一个li标签

div p:only-child { } 选择div标签中唯一子元素P,且同级无其它元素

div p:only-of-type { } 选择div标签中的唯一的P元素,同级可以有其它元素

nth-child( n ) { } 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

odd 为奇数 even 为偶数

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n 可以是一个数字，一个关键字，或者一个公式。

odd 为奇数 even 为偶数

a链接标签中的伪类选择器

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

a:hover 必须被置于 a:link 和 a:visited 之后

a:active 必须被置于 a:hover 之后

盒子模型

盒子模型的组成

content padding border margin

内边距padding撑开盒子大小的解决方法

修改盒子的大小
给当前盒子添加一个父级盒子,并设置它的宽高

外边距的叠压

当两盒子垂直方向的上下边距相等时会重叠
当两盒子垂直方向的上下边距不相等时会以大的为准,小的陷入大的外边距中

边框

边框可以设置宽,样式,颜色

border: 1px solid #ccc ; solid>实线 dashed>虚线

边框折叠

border-collapse:collapse;

圆角盒子

border-radius: 20px; 可以设置百分比,正方形盒子设置50%则为圆

阴影盒子

box-shadow:

水平方向位移垂直方向位移阴影大小阴影扩展面阴影颜色反投影inset(可选)

外发光

box-shadow:0 0 8px 3px #ccc;

内发光

box-shadow:0 0 8px 3px #ccc inset;

右下(右上左上左下同理,类似于向限)

box-shadow:8px 8px 8px 3px #ccc inset;

表格

背景

background-image(../img)

背景重复

background-repeat:no-repeat; 不会重复

repeat-y 只有垂直方向重复

repeat-x 只有水平方向重复

inherit 从父元素继承样式

背景大小

background-size:cover; 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

background-size:contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

background-size:100px; 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

background-size:50%; 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

字体大小

font-size: 1.6em;

字体加粗

font-weight: bolder;

字体倾斜

font-style: italic;

font-style:oblique;

字体类型

font-family:” Arial”;

文本居中

子元素是行内元素

单行文本居中

水平居中: 在父元素设置 text-align:center;

垂直居中: 在行内元素(子元素)设置行高为父元素的高; line-heigh:

多行文本居中

水平居中: 在父元素设置 text-align:center;

垂直居中: 在父元素设置 display:table-cell ; vertical-align: middle;

子元素是块元素

水平居中: 子元素设置margin:atuo;

垂直居中: 在父元素设置 display:table-cell ; vertical-align: middle;

子元素是不定宽的块元素(导航栏)

水平居中: 在父元素设置 text-align:center; 子元素设置display:inline-block

垂直居中: 在ul标签设置 line-height

底部居中: 在父元素设置 display:table-cell ; vertical-align: middle;

li标签取消样式

li { list-type:none; }

ul { padding-left:0; }

CSS背景控制

背景颜色: background-color:transparent; transparent(默认背景)

背景图片:background-repeat:no-repeat;不重复

背景位置:background-position: 0 0; (默认)

背景图片固定 background-attachment:fixed;

Background-position:center center;

背景大小:background-size:

列表标签

list-style-type:disc;默认实心圆设置列表项标志的类型。

circle>空心圆 square>实心方块 decimal>数字

list-style-image: url(../img) 将图象设置为列表项标志。

list-style-position: inside; 列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside>默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

链接标签

text-decoration: none; 取消下划线

underline>显示下划线

定位

static:默认文档流定位

relative:相对定位元素相对于它原来的文档流中的位置进行定位

position:relative

top:50px; 距离上方50px

left:50px;距离左方50px;

absolute:绝对定位脱离文档流,并且使行内元素支持宽高,相对于父级进行定位

定位父级position:relative; 如果没有定位父级则相对于body进行定位

子级 position:abslute;

top 50px;

left 50px;

fixed:固定定位

position: fixed;

top: 50px;

left: 50px;

浮动

会脱离文档流

任何元素浮动之后都支持宽高

浮动总是沿水平方向

浮动的定义: float: left;

同级元素浮动的清除

clear:left

clear:right

clear:both;

层级元素浮动的清除

让父元素一起浮动
给父元素添加overflower: hidden;
添加一个多余的空元素来实现 (不推荐)
给父元素添加一个after伪类 { content: “” ; display: block; clear: both;}

图文混排

去掉img默认的下面的空白区

给父级添加一个极小的行高
子元素设置属性vertical-align: top; middle也行

首段落空两字符

text-indent: 2em;

三列布局

固定布局

主体中间设置父级relative，将左右侧边栏设置absolute ，内容区通过margin挤出来
min-height设置最小高度为100%
左中右都相互独立,共同存在于主体中间

双飞翼布局

内容区放前面,然后再左边,再右边,全部浮动,内容区套一个子标签
主体中间设置宽度1000px;设置显示隐藏 overflow:hidden (消除层级浮动)
设置内容区宽度100%, 高度在子标签设置
子标签设置margin 挤出位置,左边设置margin-left:-100%; 右边设置margin-left:-200px
相当于内容区两边被左右给盖着, 内容由子标签显示出来

圣杯布局

内容区放前面,然后再左边,再右边
主体中间设置宽度为内容区的宽度,左右边分别再主体中间的两边,相当于主体中间用来显示内容
设置内容区的宽度100%; 左边和右边分别移动margin-left
主体中间通过padding来填充内容区大小
通过相对布局使得左边和右边的内容压在padding上面显示

网站企业布局

一般至少创建三个CSS文件

样式重置文件 reset.css
- html
  1. overflow-y:auto; 显示垂直滚动条
  2. overflow-x:hidden; 隐藏水平滚动条
- body , h1 , h2 , h3 , ul , li , p
  1. margin:0;
  2. padding:0
  3. font-family: ’ ’,’’,’’; 设置字体
- p , li , a
  1. font-size: 设置字体大小
- ul , li
  1. list-style-type:none; 清除样式
- a : link a:visited a: active
  1. text-decoration : none ; 取消下划线
- a: hover
  1. text-decoration : none ;
公共CSS文件 common.css