Web前端之CSS_前端 css-CSDN博客

本文链接：https://blog.csdn.net/w252064/article/details/78883204

前面说了HTML，现在再来数一说CSS，所谓CSS是指层叠样式表 (Cascading Style Sheets)，通过引入样式表，从而极大的提高了工作效率。

CSS

基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }
选择器通常是你需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}

常见的选择器

ID选择器—-可以为标有特定 id 的 HTML 元素指定特定的样式，以 “#” 来定义

#red {color:red;}
#green {color:green;}

id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

class选择器—-以一个点号显示

.center {text-align: center;}

class 也可被用作派生选择器：

.fancy td {
    color: #f60;
    background: #666;
    }

【注意】类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

标签选择器(元素选择器)

这种是最常见的，换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

属性选择器—-对带有指定属性的 HTML 元素设置样式

<!--设置样式-->
[title]
{
color:red;
}

<a title="W3School" href="http://w3school.com.cn">W3School</a>

CSS设置背景(background)

背景颜色 background-color
背景图片 background-image
背景重复 background-repeat:repeat-x/repeat-y
背景位置 background-position:bottom/left/top/right/center
背景关联 background-attachment:fixed/scroll

综合写法：
.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS设置文本格式

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

文本缩进：Text-indent:2em
文本对齐方式：Text-align:left/right/center/ justify
文本修饰：Text-decoration:underline/line-through/overline/none
字符间距：Word-spacing:px/em 英文单词之间的间隔；
Letter-spacing:px/em汉字和英文字母之间的间隔；
文本转换：Text-transform:uppercase/lowercase/ capitalize
行与行间距：Line-height:px/%
垂直对齐图像： vertical-align：text-top/text-bottom
文本阴影：text-shadow:水平偏移，垂直偏移颜色

字体

字体类型:font-family:”sans-serif”;
字体样式:font-style:normal ;
字体大小:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体
字体加粗:font-weight:normal;
字体的转变:font-variant:normal/smallcaps;

CSS链接

链接的四种状态

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 之后

去掉a链接默认的下划线
text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

创建链接块
display:block;

列表样式

在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square;}

上面的声明把无序列表中的列表项标志设置为方块。

列表项图像
你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif);}

列表标志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格边框

table,th,td{border:1px solid red;}

折叠边框

border-collapse:collapse;

表格的宽度和高度
width,height
表格的文字水平对齐
text-align:center/right/left;
表格的文字垂直对齐
vertical-align:bottom;
表格的内边距
padding
表格的背景颜色
background

盒子模型

这里写图片描述
margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的。
根据上, 右, 下, 左的顺时针规则, 简写为
margin: 40px 40px 40px 40px;
为便于记忆, 请参考下图：

当上下, 左右margin值分别一致, 可简写为:

margin: 40px 40px;

前一个40px代表上下margin值, 后一个40px代表左右margin值.

当上下左右margin值均一致, 可简写为:
margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离

【注意】当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 在此建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.

边框

边框样式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
边框宽度：border-width
边框颜色：border-color
综合写法：
border:1px solid red;

轮廓(outline)

可以按顺序设置如下属性：
outline-color
outline-style
outline-width

<html>
<head>
<style type="text/css">
p 
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
</style>
</head>

<body>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
</body>
</html>

这里写图片描述

CSS所有尺寸

宽度
width/min-width/max-width
高度
height/min-height/max-height
行高
line-height

display显示类型

隐藏元素—–display:none或者visibility:hiddden
display通常可以设置为none、inline、block
visibility通常可以设置为hidden、visible
二者的区别在于display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。

CSS块级元素和内联元素—-display:block/inline/inline-block;

CSS定位(position)

position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

CSS浮动

设置浮动：float:left/right;
清除浮动：clear:both/left/right/null;
浮动的两个影响因素：1、文档流 2、显示类型

元素内容溢出

溢出滚动条
overflow:scroll（不管是否溢出都会有滚动条）、auto（自动添加）
溢出隐藏
overflow:hidden;

CSS的相关特性

1、继承性
它不仅允许样式应用于某个特定的html标签元素，而且还可引用于其后代；
2、CSS层叠
当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用，后面的CSS样式会覆盖前面的样式。
总而言之：内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部引入文件)