css textbox 边框去掉_css基本属性

CSS基本属性

1. 什么是CSS?

2. 如何导入css到html文件中？【3种】

3. CSS的基本选择器

4. CSS的基本属性

4.1 修饰文本的样式属性

属性名称

属性的作用

属性的取值

text-transform

文本转换大小写

None:capitalize:Uppercase：

Lowercase

text-align

元素内容的水平对齐方式。

left | right | center....

word-spacing

单词之间的额外间隙

数字+单位【px】可以为负数

letter-spacing

字符与字符之间的间隙

数字+单位【px】可以为负数

text-indent

定义块内文本内容的缩进

数字+单位【px】可以为负数

vertical-align

定义行内元素在行框内的垂直对齐方式

top middle bottom

line-height

定义元素中行框的最小高度。

数字+单位【px】不能为负数

常用的文本属性

#p1{

text-transform:none;

text-align:left;

text-indent: 50px;

}

#p2{

text-transform:capitalize;

text-align:center;

}

#p3{

text-transform:uppercase;

text-align:right;

}

#p4{

text-transform:lowercase;

}

#p5{

text-transform:full-width;

}

#p6{

word-spacing:10px;

letter-spacing:15px;

}

table{

height: 200px;

}

table tr td{

vertical-align: bottom;

}

#p7{

line-height: 20px;

}

常用的文本属性

none：无转换

capitalize：将每个单词的第一个字母转换成大写 [常用]

Uppercase：将每个单词转换成大写 [常用]

Lowercase:将每个单词转换成小写 [常用]

full-width：将所有字符转换成fullwidth形式。

如果字符没有相应的fullwidth形式，将保留原样。

这个值通常用于排版拉丁字符和数字等表意符号。(CSS3)

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

this is a html page! 这是一个html文件

vertical-align

定义行内元素在行框内的垂直对齐方式

top middle bottom

4.2 修饰字体的样式属性

属性名称

属性用途

属性取值

font-style

文本是否为斜体

normal | italic | oblique

font-weight

文本字体的粗细

用数字表示文本字体粗细

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-size

定义元素的字体大小

数字+单位【px】

font-family

定义元素文本的字体样式

字体样式名称，可以有多个，中间用“，”

color

设置字体颜色

单词/颜色码

字体设置属性

#p1{

font-style:italic;

}

#p2{

font-weight:900;

}

#p3{

font-size:50px;

font-weight:900;

}

#p4{

font-style:italic;

font-weight:900;

font-size:50px;

font-family:helvetica, verdana, sans-serif;

color: red;

}

字体设置属性

font-style 文本是否为斜体 normal | italic | oblique

font-weight 文本字体的粗细 用数字表示文本字体粗细

font-size 定义元素的字体大小 数字+单位【px】

font-family 定义元素文本的字体样式 字体样式名称，可以有多个，中间用“，”

color 设置字体颜色 单词/颜色码

4.3 修饰颜色的样式属性

属性名称

用途

取值

color

文本颜色

单词/颜色码

background-color

元素的背景色

单词/颜色码

颜色设置

p{

font-size: 30px;

color: red;

background-color: blue;

}

color 文本颜色 单词/颜色码

background-color 元素的背景色 单词/颜色码

4.4 修饰背景的样式属性

属性名称

用途

取值

background-color

定义元素使用的背景颜色。

单词/颜色码

background-image

定义元素使用的背景图像

图片路径
url(图片路径);

background-repeat

定义元素的背景图像如何填充

repeat-x： 背景图像在横向上平铺

repeat-y： 背景图像在纵向上平铺

repeat： 背景图像在横向和纵向平铺

no-repeat： 背景图像不平铺

背景设置

body{

background-image:url(imgs/avatar04.png);

background-repeat:no-repeat;

}

p{

font-size: 50px;

background-image: url(imgs/bg2.jpg);

}

background-color 定义元素使用的背景颜色。 单词/颜色码

background-image 定义元素使用的背景图像 图片路径url(图片路径);

background-repeat 定义元素的背景图像如何填充 repeat-x： 背景图像在横向上平铺

repeat-y： 背景图像在纵向上平铺 repeat： 背景图像在横向和纵向平铺 no-repeat： 背景图像不平铺

4.5 修饰边框的样式属性

属性名称

用途

取值

border-width

定义元素的边框厚度

数字。

上、右、下、左的顺序

1个值 -- 全部4边

2个值 -- 上/下 左/右

3个值-- 上 左/右 下

4个值 -- 上、右、下、左

border-style

定义元素的边框样式

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

border-color

定义元素的边框颜色

单词/颜色码。

上、右、下、左的顺序

1个值 -- 全部4边

2个值 -- 上/下 左/右

3个值-- 上 左/右 下

4个值 -- 上、右、下、左

border： || ||

边框设置

#div1{

width: 100px;

height: 100px;

border: 5px double red;

}

#div2{

width: 200px;

height: 200px;

border-width: 10px;

border-style: solid;

border-color: blue;

}

#div3{

width: 300px;

height: 300px;

border-width: 10px 20px 30px 40px;

border-style: dotted;

border-color: red blue yellow greenyellow;

}

#div4{

width: 400px;

height: 400px;

border-width: 10px 20px;

border-style: dashed;

border-color: red blue;

}

img{

border: 10px outset black;

}

4.6 修饰文本装饰样式属性

属性名称

用途

取值

text-decoration-line

设置文本的装饰线

none： 指定文字无装饰

underline： 指定文字的装饰是下划线

overline： 指定文字的装饰是上划线

line-through： 指定文字的装饰是贯穿线

blink： 指定文字的装饰是闪烁。

text-decoration-color

设置文本的装饰线颜色

单词/颜色码

text-decoration-style

设置文本的装饰线的样式

solid | double | dotted | dashed | wavy

text-shadow

文字是否有阴影及模糊效果

数字1[水平偏移量]

数字2[垂直偏移量]

数字3[模糊度]

颜色

文本装饰属性

#p1{

font-size: 40px;

color: red;

text-decoration-line:underline;

text-decoration-color:blue;

text-decoration-style: double;

text-shadow: 5px 5px 20px #000000;

}

a{

font-size: 40px;

text-decoration-line:none;

color: black;

}

文本装饰属性---text-decoration-line---文本的装饰线

去掉超链接上的下划线

文本装饰属性---text-decoration-color---文本的装饰线的颜色

文本装饰属性---text-decoration-style---文本的装饰线的形状

文本装饰属性---text-shadow---文字是否有阴影及模糊效果

4.7 修饰尺寸样式属性

属性名称

用途

取值

width

定义元素的宽度

数字

height

定义元素的高度

数字

尺寸设置

div{

width: 400px;

height: 400px;

border: 10px solid black;

background-color: red;

}

4.8修饰边距样式属性

属性名称

用途

取值

margin

margin-top

margin-bottom

margin-left

margin-right

元素设置所有四个方向(上右下左)的外边距

数字

上、右、下、左的顺序

1个值 -- 全部4边

2个值 -- 上/下 左/右

3个值-- 上 左/右 下

4个值 -- 上、右、下、左

padding

padding-top

padding-bottom

padding-left

padding-right

元素设置所有四个方向(上右下左)的内边距

数字

上、右、下、左的顺序

1个值 -- 全部4边

2个值 -- 上/下 左/右

3个值-- 上 左/右 下

4个值 -- 上、右、下、左

尺寸设置

div{

width: 400px;

height: 400px;

border: 10px solid black;

background-color: red;

margin-top:-8px;

m

}

body{

padding-left: 100px;

}

4.9修饰列表样式属性

list-style-image--设置或检索作为对象的列表项标记的图像---图片路径

list-style-type-----设置或检索作为对象的列表项预设标记---disc | circle | square | decimal...

列表属性

ul li{

font-size: 20px;

list-style-type: square;

}

ol li{

font-size: 30px;

list-style-image: url(imgs/list.png);

}

• name：张三
• age：23
• sex：男
• address：西安

1. name：张三
2. age：23
3. sex：男
4. address：西安