CSS基本用法(一)

最新推荐文章于 2024-09-09 15:18:53 发布

爱挣钱的女孩

最新推荐文章于 2024-09-09 15:18:53 发布

阅读量335

点赞数

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

本文链接：https://blog.csdn.net/zhucihe/article/details/78040949

版权

PHP 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. CSS基础语法

1.1. CSS三类用法

1.1.1. 嵌入式

将样式写在标签中间，一般将该标签放在head标签里面。

例如：

<head>
    <meta charset="UTF-8">
    <title>文本字体属性练习</title>
    <style>
        span{font-weight: bold;}
        .h{
            font-style:italic;
            color:red;
        }   
        a{
            text-decoration: none;
            color: blue;
        }
    </style>
</head>

1.1.2. 外链式

在head标签中用指定方式引入外部css文档中的样式例如：

<head>
    <meta charset="UTF-8">
    <title>外链式</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

1.1.3. 行内式

将样式以style属性写在要使用该样式的标签内例如；

<p style="text-decoration:underline">

1.2. CSS选择器

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式。

选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。

1.2.1. 基本选择器

选择器	格式	含义	举例
通用选择器	*{属性:值}	通用选择器，将匹配HTML所有标签	*{margin:0}
标签选择器	标签名{属性:值}	匹配对应HTML标签	p{font-size:14px}
类选择器	.class{属性:值}	给拥有指定class属性值的标签设置样式	.box{width:800px}
Id选择器	#id{属性:值}	给拥有指定id属性值的标签设置样式	#title{font-size:14px}

1.2.2. 复合选择器

选择器	含义	举例
选择器1,选择器2{属性,值}	多元素选择器，同时匹配选择器1和选择器2，以逗号分隔	p,h1,h2{margin:0px;}
E F{属性:值}	后代元素选择器，匹配所有属于E元素后代的F元素,以空格分隔	#sidebar p{color:#990000;}
E>F{属性:值}	子元素选择器,匹配所有E元素的子元素F	div>p{color:color:#990000;}
E+F(属性：值)	相邻元素选择器，匹配所有紧随E元素之后的同级F元素	div+div{color:#990000}

1.2.3. 伪类选择器

选择器	含义
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:hover	向鼠标悬浮指向的元素添加样式
:active	向鼠标点击未弹起的元素添加样式

1.2.4. 属性选择器

选择器	含义	举例
[attr]	匹配所有有attr属性的标签	[align]{font-size:14px}
[attr=val]	匹配所有有attr属性且值为val的标签	[align=”center”]{font-size:14px}
[attr^=val]	匹配所有有attr属性且值以val开头的标签	[color^=”#ff”]{border:1px solid red}
[attr$=val]	匹配所有有attr属性且值以val结尾的标签	[color$=”#00”]{border:1px solid blue}
[attr*=val]	匹配所有有attr属性且值包含val的标签	[color$=”#aa”]{border:1px solid green}

1.3. CSS常用属性

文本样式属性
- color 文本颜色，rgb(1,2,3) 或者#F0F0F0 或者red
- text-transform 大小写转换。capitalize 首字母大写；uppercase 全部大写；lowercase 全部小写
- text-indent 设置缩进。允许负值，单位px或者百分比。
- letter-spacing 设置字间距
- word-spacing 设置词间距
- font-style 设置文本样式。normal 正常；italic 斜体
- font-weight 设置文本粗细。normal 正常；bold 加粗
- font-size 设置文本大小。单位px
- font-family 设置字体。
- font 简写属性。例子：font:italic bold 14px "黑体" 属性间用空格隔开，顺序为 font:style weight sizi family
- text-decoration 设置文本修饰线。underline 下划线；overline 上划线；line-through 删除线；none:清楚修饰线。
- text-align 文本水平位置。left;center;right
- line-height 设置行高。单位px或者百分比
块级标签属性
- height 高度，单位px
- width 宽度，同上
- margin 外边距单位px。margin:0 auto 居中
- padding 内边距单位px。
- float 浮动。float:left 左浮动；float:right右浮动
- border 边框属性。border:1px solid #f00粗细（单位px）；线型（solid实线 dotted点线 dashed虚线）；颜色
列表样式属性
- list-style-type 列表项符号类型。none:清除样式 disc:实心圆点 circle：空心圆；squere：实心方块
- list-style-position 列表项符号位置。inside:li里面；outside:li外面
- list-style-image 用图片表示列表项符号。list-style-image:url(图像路径)
- list-style 列表属性简写 list-style:type position image，以空格分隔，其属性值个数不定，位置不定。
背景样式属性
- background-color 背景颜色。要求有内容或者有宽高
- background-image 背景图片。background-image:url(图片路径) 默认平铺
- background-repeat 图片是否重复。repeat:水平垂直都平铺(默认); repeat-x：水平平铺；repeat-y：垂直平铺;no-repeat:不平铺
- background-position 设置图片位置
  值为 水平垂直 left right top bottom center：
  英文单词组合如background-position:left top;
  固定值(可为负值) 例如background-position:100px 100px;
  百分比例如 background-position:50% 50%;
  可混合使用例如background-position:left 50%;
- background-attachment 是否附着在父元素上 scroll 滚动(默认值); fixed 固定
- background
  简写属性background:#ccc 100px 100px url(./images/x.jpg) no-repeat fixed
  其值不固定，属性个数也不固定