css 页面美化和布局控制

最新推荐文章于 2024-02-05 16:08:07 发布

罗密欧与猪一夜

最新推荐文章于 2024-02-05 16:08:07 发布

阅读量361

点赞数

文章标签： css

本文链接：https://blog.csdn.net/jerry_wzj_/article/details/106901014

版权

css : 页面美化和布局控制

1.概念：Cascading Style Sheets 层叠样式表哦

层叠：多个央视可以作用在同一个html的元素上，同时生效

2.好处：

1.功能强大

2.将内容展示与样式控制分离

*降低耦合度

*行分工协作更容易

*提高开发效率

3.CSS与html结合方式

1.内联样式: 在标签内使用style属性指定css代码

< div style=>

2.内部样式：在head标签内，定义style标签，在style标签内定义html属性

3.外部样式：1.定义css文件。2…在head标签内，用link标签引入css文件

4.CSS语法：

选择器{

属性名1：属性值

属性名2：属性值

}

选择器：

基础选择器：

id选择器：选择具有相同id属性值的元素，建议在一个html页面中的id值唯一

语法：#id属性值{} 优先级高于类选择器,高于元素选择器
元素选择器：选择具有相同标签名称的元素

语法：标签名称{}
类选择器：选择具有相同class属性值的元素,class可以有多个属性值

语法1：.class的属性值{} 优先级高于元素选择器

语法2：标签名.class的属性值{}


<head>
    <meta charset="UTF-8">
    <title> 表格</title>
   <!--<link rel="stylesheet" href="a.css">-->
    <style>
        div {
            color: green;
        }
        #div1 {
            color: red;
        }
        .class1 {
            color: blue;
        }
    </style>

</head>
<body>
<div id="div1">杭州</div>
<div> 西湖</div>
<p class="class1">雷峰塔</p>
</body>

扩展选择器：

选择所有元素：

*{}

组合选择器：

选择器1 选择器2{}
包含选择器：

ol li{}

4.伪类选择符（修饰超链接）页面所有超链接都被修饰了

格式：标签名：伪类名{}

a:link {color: #FF0000; text-decoration: none}        /* 未访问的链接 */ 
a:visited {color: #00FF00; text-decoration: none}     /* 已访问的链接 */ 
a:hover {color: #FF00FF; text-decoration: underline}  /* 鼠标在链接上*/ 
a:active {color: #0000FF; text-decoration: underline}   /*激活链接*/

css3中的选择器

关系选择器

div>p {} 选择所有作为div元素的子元素p

div+p {}选择紧贴在div元素之后p元素

div~p {} 选择div元素后面的所有兄弟元素p
属性选择器

[属性名]{}选择具有此属性名的元素

[属性名=属性值]{}选择具有此属性且值也一样的元素

[属性名~=属性值]{}选择具有此属性和多个属性值中有一个满足的元素

[属性值^=a]{}匹配具有此属性、且值以此字符开头的元素

[属性值$=a]{}匹配具有此属性、且值以此字符结尾的元素

[属性值^=a]{}匹配具有此属性、且值中有此字符的元素
结构性伪类选择器

::first-letter{}设置对象内的第一个字符

::first-line{}设置对象内的第一行

:before设置在对象前发生的内容

:after设置在对象后发生的内容

:lang匹配使用特殊语言的e元素

:fisr-of-type匹配同类型中的第一个同级兄弟元素
状态伪类选择器

:link设置超链接a在未被访问前的样式

:visited设置超链接a在其链接地址已被访问过的样式

:active设置元素在被用户激活时的样式

:hover设置元素在其鼠标悬停时的样式

:focus设置元素在其获取焦点时的样式

:target匹配相关URL指向E元素
其他伪类选择器

css常用属性

1.尺寸与单位

尺寸：

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em等于当前的字体尺寸
ex	一个ex是一个字体的x-height
pt	磅
pc	12点活字
px	像素

颜色：

单位	描述
颜色名	颜色单词名称
rgb(x,x,x)	RGB值
rgb(x%,x%,x5)	RGB百分比值
#rrggbb	十六进制

color颜色属性值

hsl(x,x,x): 色调，饱和度，亮度

hsla(x,x,x): 色调，饱和度，亮度，透明度

rgb(x,x,x)：红，绿，蓝

rgba(x,x,x,x)：红，绿，蓝，透明度

2.字体属性：font

font:简体
font-size：字体大小:20px,60%基于父类对象的百分比取值
font-family：字体：宋体，Arinal
font-style: normal正常；italic 斜体；obliqu 倾斜的字体
font-weight: 字体加粗：bold
font-variant: small-caps 小型的大写字母字体

3.文本属性

text-indent:首行缩进：text-indent:2em
text-overflow:文本的溢出是否使用省略标记(…).cliplellipsis(显示省略标记)
text-align:文本的位置：left center right
vertical-align:文本的垂直对齐方式
text-transform:对象中的文本的大小写：capitalize(首字母) uppercase(大写) lowercase(小写)
text-decoration: 字体画线：none无、underline下划线、line-through贯穿线
text-shadow:文本的文字是否有阴影和模糊效果
white-space: nowrap: 强制在同一行内显示所有文本
letter-spacing: 文字和字母的间距
word-spacing: 单词间距
line-height: 行高
color: 颜色

4.背景属性：background

background:简写
*background-color:背景颜色
*background-image:背景图片
*background-repeat: 是否重复平铺多个，如何重复
*background-position:定位
background-attachment:是否固定背景：scroll:默认值。背景图像是否随对象内容滚动；fixed:背景图像固定
*background-size: 背景大小，background-size:100px 140px

简写:

     background-color:cadetblue;
     background-image: url("./images/1.gif");
     background-repeat: no-repeat;
     background-position: bottom right; 
   
      /*等价于上面简写：背景图片1.gif，上下左右都居中，不平铺，背景颜色*/
     background: url(./images/1.gif) center center no-repeat cadetblue;

5.边框属性

border: 宽度样式颜色
border-color;
border-style: 边框样式：solid实现，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style
border-left-width …
border-radius:圆角处理
box-shadow:设置或检索对象阴影

6.内补白

padding: 检索或设置对象四边的内部边距，
padding-top: 检索或设置对象顶边的内部间距
padding-right：检索或设置对象右边的内部间距
padding-bottom：检索或设置对象下边的内部间距
padding-left：检索或设置对象左边的内部间距

7.外补白

margin: 检索或设置对象四边的外延边距， margin:auto: 左右自适应，上下为0
margin-top: 检索或设置对象顶边的外延边距
margin-right：检索或设置对象右边的外延边距
margin-bottom：检索或设置对象下边的外延边距
margin-left：检索或设置对象左边的外延边距

8.Position定位

9.Layout布局

其他：

变成块元素：display :block

罗密欧与猪一夜

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css 页面美化和布局控制

css : 页面美化和布局控制1.概念：Cascading Style Sheets 层叠样式表哦层叠：多个央视可以作用在同一个html的元素上，同时生效2.好处： 1.功能强大 2.将内容展示与样式控制分离 *降低耦合度 *行分工协作更容易 *提高开发效率3.CSS与html结合方式 1.内联样式: 在标签内使用style属性指定css代码 < div s
复制链接

扫一扫