重新学习css之样式

最新推荐文章于 2024-12-10 21:36:38 发布

小白记事录

最新推荐文章于 2024-12-10 21:36:38 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41283108/article/details/81780095

two
———样式
背景：
background-color———背景颜色
background-repeat（no-repeat,repeat-y,repeat-x）———不平铺，垂直方向平铺，水平方向平铺
background-image———背景图片
background-position———图片位置
可以使用以下表格的内容，也可以采用%，或者像素等
如:background-position:50% 30% 或者 background-position:50px 30px

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

background-attachment(fixed)——–防止图片随着文档向下滚动而滚动
文本：
首行缩进：
text-indent:值可以是负数，为负值的情况下就同文本的悬挂缩进（设置负值可能出现超出浏览器，可以设置padding-left，缩进大小相对于父元素来讲）
text-align:left,right,center,justify(水平对齐)
center 和<CENTER>不一样，<CENTER>会使元素也一起移动，而center只是使文本内容移动，不会去移动元素
我去测试的时候没有觉得justify和left有什么不同，希望知道的朋友能给我讲解下？？？？？？？？？？？？？
大家想详细了解text-align的，请戳：
http://www.w3school.com.cn/cssref/pr_text_text-align.asp
字体：
font-family
特定字体：Times,Courier
通用字体：Serif ,Sans-Serif ,Monospace,Cursive,Fantasy
字体可能根据本地已安装的字体是否有该字体进行显示，因此并不是你想设置什么样子的字体就一定会是什么样的，详情可看：
http://www.w3school.com.cn/css/css_font-family.asp
假设用户没有安装Georgia 字体，就可以结合使用该字体和通用字体如：
h1{font-family:Georgia ,serif;}如果字体本身有空格或者特殊符号的要用’ New York’单引号。
字体风格:font-style:(normal-正常,italic-斜体,oblique-斜体)
两个斜体的不同：————-我也不是很懂的这个解释，结果也是看不出来有什么区别，希望明白人能讲解下！！！！！
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
这里写图片描述
font-variant：把段落设置为小型大写字母字体

html:
    <html>
    <head>
        <style type="text/css">
            p.normal {font-variant: normal}
            p.small {font-variant: small-caps}
        </style>
    </head>

    <body>
        <p class="normal">This is a paragraph</p>
        <p class="small">This is a paragraph</p>
    </body>

    </html>

结果：这里写图片描述
font-weight:设置文本粗细
font-size:设置文本字体大小 1em=16px em会相对于父元素字体的改变而改变
链接：
a:hover - 鼠标指针位于链接上方
a:link - 普通的、未被访问的链接
a:visited - 用户已访问过的链接
a:active - 链接被点击的时刻

当为链接的不同状态设置样式，其顺序规则是：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
简介为：a:link,a:visited>a:hover>a:active

text-decoration去掉链接下方的下划线：
a:link {text-decoration:none;} /* 未被访问的链接 */
a:visited {text-decoration:none;} /* 已被访问的链接 */
a:hover {text-decoration:underline;} /* 鼠标指针移动到链接上 */
a:active {text-decoration:underline;} /* 正在被点击的链接 */

列表：
修改列表的标签类型：list-style-type
有时候标志不够可以使用图片：list-style-image
设置标签是在内容内部还是外部：list-style-position
可以把以上三个合并成一个list-style 如：li {list-style : url(example.gif) square inside}

表格：

<style>
table,th,td{
border: 1px solid black;
}
//这个设置会使表格出现双条线，使用border-collapse合并线条
table{
border-collapse:collapse
}
</style>

使用之前：这里写图片描述
使用之后：

vertical-align：设置垂直对齐
详情请戳：http://www.w3school.com.cn/css/css_table.asp
轮廓：

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2