css

最新推荐文章于 2024-05-27 14:48:10 发布

Wolves_7

最新推荐文章于 2024-05-27 14:48:10 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Wolves_7/article/details/82464738

css

cascade 级联,层叠
style 样式
sheet 表格
控制网页上标签的各种样式 : 颜色,字体,边框,间距...

格式

(1) 行内样式
每个标签加一个样式

<标签 style="多个样式"></标签>

缺点：样式代码重复

(2) 内部样式表

<html>
	<head>
		<style>样式定义</style>
	</head>
</html>

可以解决样式重复

(3) 外部样式表
把样式信息定义在一个单独的 *.css 的文件中
好处 :可以更大程度地在多个网页间重用样式，让网站的风格统一

<html>
	<head>
		<link rel="stylesheet" href="css文件路径">
	</head>
</html>

内部样式表可以实现本网页特殊的样式，采用覆盖的方法，可以覆盖

行内样式

<标签 style="多个样式"></标签>

颜色

color:颜色值
颜色值可以是英文单词：red，blue，green，yellow, black, white
也可以是红绿蓝三原色： rgb(255,0,0)
还可以是16进制的值来表示： #FF0000

background-color: 背景色

字体样式

font-size 像素 n px; 字体本身大小 n em;
font-family 字体名称：如宋体，隶书 ...
font-style: italic; 斜体
font-weight: bold; 粗体

对齐方式

text-align: center 居中， left 左对齐， right 右对齐

background

background-image: url(背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x repeat-y repeat(xy方向上都重复)
background-size: 110px 缩放背景图大小

div标签

<div>
    <p>
    <table>
    ...
</div>

作用:
1. 页面布局
2. 统一处理

宽高

width: 宽度
height: 高度
单位可以以像素为单位 n px, 还可以是百分比 n %(以父元素为基准)

边框

border-color: 颜色
border-style: 样式（实线等）
border-width: 宽度
可以把它们合并为一个
border: blue solid 100%
还有:
border-top 上边框
border-right 右边框
border-bottom 下边框
border-left 左边框

内间距

标签和内容之间的间隙，称为内间距
padding 可以同时控制4个方向上的内间距
padding : 10px 10px 10px 10px;
上右下左

padding : 20px 5px;
上下左右

padding : 10px
上下左右

padding-top
padding-right
padding-bottom
padding-left

外间距

同级标签之间的间隙，称为外间距
margin: 10px 10px 10px 10px;
上右下左
margin :10px
上下左右
margin-top
margin-right
margin-bottom
margin-left

盒子模型

外间距 --》边框 --》内间距 --》内容

z-index

代表该元素在z轴的位置，数字越大越向外, 要配合绝对定位使用
position:absolute; left:x坐标（向右）; top:y坐标(向下)
绝对定位

rgba(红, 绿, 蓝, 透明度)
0~1 0 表示完全透明， 1 表示不透明

样式表

重用样式
格式：

<html>
  <head>  
    <style>
     样式表
    </style>
  </head>
</html>

选择器 { 样式 }
选择器匹配标签,然后将样式应用于标签

元素选择器

根据标签的名称进行匹配
例如div 是匹配页面中所有的div标签，p匹配页面中所有的p标签 ...
div { ... } p{ ... }

class选择器

<p class="值">	
<td class="">	
<input class="">	
.class值 { 样式 }

id选择器

根据标签的id属性值进行匹配

<p id="值1">
<td id="值2">
<input id="值3">   id的取值要唯一
#id值 { 样式 }

父子选择器

父选择器>子选择器
最终选中的是子选择器匹配的标签，但必须满足条件：父标签要和父选择器匹配

后代选择器

祖先选择器后代选择器

伪类选择器

:hover 当鼠标悬浮在标签之上，算匹配
:nth-child 当作为第n个孩子元素, n从1开始
:last-child 当作为最后一个孩子元素

选择器的优先级

(1) 当多个选择器都匹配到同一个标签时，会产生优先级问题：

!important > style行内样式 > #id > .class > 元素

!important 用来提升某个样式的优先级, 写法 :

样式 !important

(2) 子标签可以从父标签继承某个样式，例如color
子标签自己定义了同名样式，那么它会覆盖父标签的样式

(3) 同优先级别的选择器，后定义的会覆盖前面定义的