CSS

最新推荐文章于 2024-03-14 18:53:18 发布

液晶电视电视剧

最新推荐文章于 2024-03-14 18:53:18 发布

阅读量178

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/juliuyi/article/details/111409588

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML ：为网页添加内容

<标签属性们>
内容或内部标签们
</标签>

CSS ：对HTML元素进行样式控制

<标签属性们>
HTML元素选择器们
</标签>

CCS由两个部分组成：选择器以及一些声明。

CSS选择器

	html标签	对应CSS选择器
标签选择器	哈哈哈	P{ }	对相同标签的元素进行操作
id选择器	这个段落是红色	#red{ }	id是唯一的
类选择器	这个段落	.class1{ }	每个标签都可以有class属性，故通过设置相同的class来对不同标签的元素或部分相同标签元素进行相同操作，类中还可以设置多个值，来达到更加多样化选择。
属性选择器	红色的啊喂	[ ]{ }	具有相同属性，而不论属性值是什么

后代选择器：

<!--css部分-->
h1 em {color:red;}
<!--html部分-->
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

将h1标签下所有em元素设置为红色。需要注意的是不管em是h1第几级元素，都会设置为红色，即他们之间的层级间隔是无限的。

子元素选择器：

<!--css部分-->
h1 > strong {color:red;}
<!--html部分-->
<h1>This is <strong>very<strong>very</strong> </strong> important.</h1>

将h1下的所有第一级strong元素设置为红色，而第二级不会

选择器的混合使用：不同类型的选择器混合使用

h1,p,em {
  color: green;
  }
.name,#02,p{
  color:blue;
  }

同时将三种标签元素设置为绿色

选择器优先级：选择范围小的，选中元素少的优先级高

设置宽和高

width: 50px;
height: 50px;

设置元素占用区域大小。超出元素实体的部分会产生白色背景。

边框，内边距，外边距


boder-style	边框样式
boder-width	边框宽度
boder-color	边框颜色	还可以设置border-color: blue yellow yellow red;其他boder同理
boder:宽度颜色样式；	上述三者的简写，但是这样写没有提示。

boder-top-style	上边框样式	单独设置上边框，同理还有 left, right,botton
boder-top-width	上边框宽度
boder-top-color	上边框颜色
boder-top:宽度样式颜色；	同理


boder-radius : 50px / 80px ;	圆角边框。	前者是侧边到圆心的距离，后者是上或下边到圆心的距离

2.1boder-style选项


solid	普通边框
double	双边框
dotted	点边框
groove	类似相框质感的边框
dashed	虚线边框

2.2内边距和外边距

	内边距	外边距
	用于控制元素与边框之间的空白距离	为元素边框外创建额外空白距离，用以改变元素位置
	padding	margin
	padding-top botton left right 上下左右	margin-top botton left right
	padding:5px 5px 6px 7px 上右下左顺时针	padding:5px 5px 6px 7px

margin可以为负值，且经常为负值。

padding : 0 auto;在父元素中居中

padding：0；

margin：0；清空内外边距。

2.2.1外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

2.3值复制

h1 {margin: 0.25em 1em 0.5em;}	/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 等价于 1px 1px 1px 1px */

背景background


background-cocor	背景颜色
backgroud-image : url (“地址”)；	背景图片

background-size	背景图片尺寸
background-repeat : no-repeat;	背景图片不重复，即在空间中只出现一次
background-attachment : fixed;	背景图片固定在屏幕某个位置，不随页面滚动
background-position	背景在页面中的位置

（1）backgroud-size选项


auto	默认，背景图片尺寸<空间尺寸时，自动重复背景填满空间
cover	背景图片覆盖整个空间
50px	手动设置背景图片尺寸。背景尺寸<空间尺寸时，自动重复背景填满空间

（2）background-repeat选项


repeat-x	图片只在x方向重复
repeat-y	图片只在y方向重复
no-repeat	图片不重复

（3）background-position选项

background-position：50px,100px;
center top left right bottom 常常组合使用，如background-position: top right;右上角

color 文本颜色

background-color 背景颜色

文本样式text

	属性	选项
文本对齐方式	text-align	center, left , right
字母间距(汉字)，单词间距，行间距	letter-spacing , word-spacing , line-height	如 letter-spacing：50px;
大小写	text-transform	capitalize 首大写；uppecase 全大写lowercase全小写
首行缩进	text-indent	如 text-indent:50px;
下划线，上划线，删除线	text-decoration	underline 下划线 line-through 删除线 overline上划线。
文本阴影	text-shadow: 10px 10px 5px red;	水平偏移量，竖直~, 模糊程度(选填)，颜色

text-decoration特别说明：

可以组合使用：text-decoration：underline line-through；
text-decoration : none 会关闭元素上的所有装饰，可以用来去除链接上的下划线。

字体font

	属性	选项
字体	font-family : 微软雅黑 ;
字体大小	font-size: 50px;
字体样式	font-style	italic 斜体
字体粗细	font-weight	以100到700整百递增，还有bold粗bolder更粗等选项
字母小写转小型大写	font-variant: all-small-caps;	蒋小写改为小写大小的大写

链接

CSS为链接设置样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    a:link{color:blue}
    a:visited{color:#b3d4fc}
    a:hover{color:red}
    a:active{color:mediumvioletred}
  </style>

</head>
<body>
<a href="www.bilibili.com">这里是B站</a>
<p>哈哈哈哈哈</p>
</body>
</html>

link未被访问链接；visited已被访问链接；hover鼠标停留；active正在被点击；

为了使定义生效，他们的顺序不能变！

列表

list-style:none 将列表项目标记设置为无。

list-style属性设置列表项目标记

list-style:	type position image
list-style-type:	设置项目标记类型
list-style-position:	设置在何处放置列表项标记
list-style-image:url(" ")	将图片设置为列表项目标记

type可能的值：circle 空心圆圈；square 实心方块；upper-roman 罗马数字；lower-alpha 小写abc。

position可能的值：inside；outside（默认值），inside比outside更靠右一些。

鼠标停留过渡

将鼠标移至目标时发生的变化动作。

    p{
      width: 100px;
      height: 100px;
      background-color: red;
    }
    p:hover{
      width: 200px;
      height: 200px;
      background-color: blue;
      transition-duration: 1s;
      transition-duration：1s；
    }

	效果
transition-delay：1s；	1s后开始过渡	过渡-延迟
transition-duration：1s；	过渡开始后1s时间里平滑变化	过渡-持续时间
transition-timing-function	ease-in 先慢后快；ease-out 先快后慢；ease-in-out 快慢快

轮廓

轮廓位于边框边缘的外围，可以起到突出元素的作用。


outline: 宽度样式颜色
outline-style	轮廓样式	solid dotted
outline-color	轮廓颜色
outline-weight	轮廓宽度	5px或thin等

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

液晶电视电视剧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS

HTML ：为网页添加内容<标签属性们>内容或内部标签们</标签>CSS ：对HTML元素进行样式控制<标签属性们>HTML元素选择器们</标签>CCS由两个部分组成：选择器以及一些声明。CSS选择器html标签对应CSS选择器标签选择器哈哈哈P{ }对相同标签的元素进行操作id选择器这个段落是红色#red{ }id是唯一的类选择器这个段落.class1{ }每个标
复制链接

扫一扫

专栏目录