css语法

最新推荐文章于 2024-10-07 21:26:16 发布

别搞我.

最新推荐文章于 2024-10-07 21:26:16 发布

阅读量410

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_79552452/article/details/139129348

版权

CSS

css(层叠样式表) 对网页进行一些静态修饰，可以配合脚本语言对网页个元素进行格式化

css语法一般都写在里面

css的注释符 /* */

css语法格式

选择器声明声明

port {color:blue；font-size：12px}

port为选择器，color为属性，blue为值，后面一样

id和class，元素选择器

第一个字符不可以用数字，如果id为选择器，那么解析器前面加#号，，如果class为选择器，那么解析器前面加.号

          #port {
            color: blue;
            text-align: center;
        }
        
   <p id="port">hello word</p>   //居中，字体颜色为蓝色
   <p>不受影响</p>

<style>
	.center{
		text-align:center;
	}
</style>

<body>
<p class="center">段落居中。</p> 
</body>

可以指定特定的html标签使用class，只需要在类名.前加一个标签

<style>
	p.center{
		text-align:center;    //p标签的内容只发生变化
	}      
</style>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>

class 选择器可以有多个类名，使用空格分开

<style>
	.center {
		text-align:center;    //h1标签居中
	}
	.color {
		color:#ff0000;    //因为和h1有同样的名字，所以也居中了，h1标签多字体颜色为红色
	}
</style>

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p> 
</body>

CSS样式表

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
 //link标签写在文档的头部，把mystyle.css文件引入
</head>

内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式表

<p style="color:sienna;margin-left:20px">这是一个段落。</p>
   //属性为style，后面是值，如果有多个用；隔开

css背景

background-color:red          //背景颜色为红色
background-image:url(路径)     // 背景图片，可以自定义
background-repeat:            //规定如何重复图像
	repeat 默认  repeat-x 沿x轴水平重复  repeat-y 沿y轴水平重复
	no-repeat 不重复  图片太小可能会留白
background-attachment  //规定图片是否固定或者随页面的其余部分滚动 
	fixed 固定  scroll 滚动
background-position          //规定图片的位置
background-size             //规定图片的尺寸
background: url(images/bg.gif) no-repeat top right  //简写

边框/border

简写    border：5px solid red；  //默认黑色边框

border-top      //上边框
border-bottom   //下边框
border-left     //左边框
border-right     //右边框
none           //无边框
hidden    //隐藏边框
dashed     //虚线
solid     //实现边框（常用）
double   //双实线边框
groove  　根据border-color的值画3D凹槽
ridge 　根据border-color的值画菱形边框
inset 　根据border-color的值画3D凹边
outset 　根据border-color的值画3D凸边

文字属性

color:red;             //文字颜色 
font-size:12px;        //文字大小
font-weight:bolds     //文字粗细(bold/normal)
font-family:”宋体”     //改字体 跟的就是字体名
font-variant:small-caps      小写字母以大写字母显示

文本属性

text-align:center;      //文本居中
	right 右对齐  left左对齐
line-height:10px;      //行间距(可通过它实现文本的垂直居中)
text-indent:20px;      //首行缩进
text-decoration:none;   //文本线 定义文本上的下划线/上划线/中划线
	underline 下划线  overline 上划线  line-through  中划线
	none  无 可以搭配a标签
letter-spacing:         //字间距单位px

列表

list-style-type 	  //定义列表前面符号的类型
list-style-position   //设置在何处放置列表项标记
list-style-image     //把前面的标记定义成自己想要的

取值为：

disc: 点

circle: 圆圈

square: 正方形

decimal: 数字

decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, …, 98

lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, …

upper-roman: 大写罗马文字，例如: I, II, III, IV, V, …

lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), …

lower-latin: 小写拉丁文，例如: a, b, c, … z

upper-latin: 大写拉丁文，例如: A, B, C, … Z

armenian: 亚美尼亚数字

georgian: 乔治亚数字，例如: an, ban, gan, …, he, tan, in, in-an, …

lower-alpha: 小写拉丁文，例如: a, b, c, … z

upper-alpha: 大写拉丁文，例如: A, B, C, … Z

none: 无(取消所有的list样式)

inherit:继承

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

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

简写   list-style:square inside url('/i/arrow.gif');

超连接

  绿色的都是选择器     
{text-decoration: none;}  //去除超连接的下划线
link {color:#FF0000;}       //未访问的链接 
visited {color:#00FF00;}    //已访问的链接 
hover {color:#FF00FF;}     //鼠标划过链接 
active {color:#0000FF;}    //已选中的链接

内边距

padding：                //内边距     单位可以是px，cm， %
padding:10px;            //上下左右
padding:10px 10px;       //上下 左右
padding:10px 10px 10px;   //上 左右 下
padding:10px 10px 10px 10px;       //上 右 下 左
padding-top:            //上内边距
padding-right:          //右内边距
padding-bottom:         //下内边距
padding-left:           //左内边距

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，高度和宽度应进行减小，根据边距增加的大小来减小width和height的值

外边距

margin：                //外边距     单位可以是px，cm， %
margin:10px;            //上下左右都会腾出10px边距来
margin:10px 10px;       //上下 左右
margin:10px 10px 10px;   //上 左右 下
margin:10px 10px 10px 10px;       //上 右 下 左
margin-top:            //上外边距
margin-right:          //右外边距
margin-bottom:         //下外边距
margin-left:           //左外边距
margin:0px auto;       //居中

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

盒子模型

盒子模型的组成部分：

外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性。

自身的宽高 width height
内边距 padding
盒子边框 border
与其他盒子的距离 margin 外边距

块元素行内元素

块级元素

他会独占一行，在默认情况下，其宽度是父元素的宽度；
块级元素可以设置width、height属性；
块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

行内元素

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
行内元素的width、height属性则无效
行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

行内元素转换

display:none; 不显示
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示，以行级元素样式排列

溢出

overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

定位

static静态定位（不对它的位置进行改变，在哪里就在那里）默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。
fixed固定定位（参照物–*浏览器窗口*）不会随着下来框的滚动而消失—做弹窗广告用到

生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, "right"以及 "bottom"属性进行规定。
relative（相对定位）（*参照物以他本身*）

生成相对定位的元素，相对于其正常位置进行定位。
absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的****父元素****进行定位)

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。