当前位置：首页 > 编程语言 > HTML——CSS基础

HTML——CSS基础

2021-05-08 11:32

阅读：436

标签：将不   normal   元素   ora   路径   状态   bre   优势   transform   

一、引入CSS样式表

1、行内式

通过标记的style属性来设置元素的样式。基本语法如下：

标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">
    主体内容
标记名>

示例：

doctype>
html>
head>
meta charset="utf-8">
title>行内式引入CSS样式表title>
head>

body>
    h2 style="font-size:20px; color:red;">使用CSS行内式修饰二级标题的字体大小和颜色h2>
body>
html>

注：只在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

2、内嵌式

将CSS代码集中写在HTML文档的

头部标签中，并且用head> style type="text/css"> 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } style> head>

示例：

doctype>
html>
head>
meta charset="utf-8">
title>内嵌式引入CSS样式表title>
style type="text/css">
h2{text-align:center;}
p{
    font-size:16px;
    color:red;
    text-decoration:underline;
}
style>
head>

body>
h2>内嵌式CSS样式h2>
p>使用style标记可定义内嵌式CSS样式表，style标记一般位于head头部标记中，title标记之后。p>
body>
html>

3、链入式

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中，基本语法为：

head>
    link href="CSS文件的路径" type="text/css" rel="stylesheet" />
head>

标记必须放在

头部标记中，并且必须指定标记的三个属性：
  • href：定义所链接外部样式表文件的URL。
  • type：定义所链接文档的类型，在这里需要指定为"text/css"。
  • rel:定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。

html文档：

doctype>
html>
head>
meta charset="utf-8">
title>链入式引入CSS样式表title>
link href="style/css" type="text/css" rel="stylesheet" />
head>

body>
    h2>链入式CSSY样式h2>
    p>通过link标记可以将扩展名为.css的外部样式表文件链接到HTML文档中。p>
body>
html>

css文档：

h2{ text-aligh:center; }
p{
    font-size:16px;
    color:red;
    text-decoration:underline;
}

二、CSS基础选择器

1、标记选择器

指用HTML标记名作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。

基本语法:
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

代码：

head>
    style>
        /* 标签选择器 */
       p{
            font-size:12px; 
            color:#666; 
            font-family:"微软雅黑";
        }
    style>
head>


body>
    p>这段文字用标签选择器设置CSS样式p>
body>

注：优点：能快速为页面中同类型的标记统一样式。 缺点：不能设计差异化样式。

2、类选择器

类选择器使用"."(英文点号)进行标识，后面紧跟类名。

基本语法:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

优势：可以为元素对象定义单独或相同的样式。

代码：

doctype>
html>
head>
meta charset="utf-8">
title>类选择器title>
style type="text/css">
.red{color:red;}
.green{color:green;}
.font22{font-size:22px;}
p{
    text-decoration:underline;
    font-family:"微软雅黑";
}
style>
head>

body>
    h2 class="red">二级标题文本h2>
    p class="green" font22>段落一文本内容p>
    p class="red" font22>段落二文本内容p>
body>
html>

注：类名第一个字符不能使用数字，并且严格区分大小写。

3、id选择器

id选择器使用"#"进行标识，后面紧跟id名。

基本语法:
#id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

代码：

doctype>
html>
head>
meta charset="utf-8">
title>id选择器title>
style type="text/css">
#bold {font-weight:bold;}
#font24 {font-size:24px;}
style>
head>

body>
    p id="bold">段落1:id="bold",设置粗体文字。p>
    p id="font24">段落2:id="font24",设置字号为24px。p>
    p id="font24">段落3:id="font24",设置字号为24px。p>
    p id="bold font24">段落4:id="bold font24",同时设置粗体和字号24px。p>
body>
html>

4、通配符选择器

通配符选择器用“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

基本格式：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

代码：

*{
    margin:0;        /*定义外边距*/
    padding:0;        /*定义内边距*/
}

注：实际开发中不建议使用通配符选择器。

5、标签指定式选择器

标签指定选择器又称交集选择器，由两个选择器构成。第一个为标记选择器，第二个为class选择器或id选择器。

代码：

doctype>
html>
head>
meta charset="utf-8">
title>标签指定式选择器的应用title>
style type="text/css">
p{color:blue; }
.special{color:red; }
style>
head>

body>
    p>普通段落文本(蓝色)p>
    p class="special">指定了.special类的段落文本(红色)p>
    h3 class="special">指定了.special类的标题文本(绿色)h3>
body>
html>

注：两个选择器之间不能有空格。如h3.special或p#one。

6、后代选择器

后代选择器用来选择或元素组的后代，其写法就是把外层标记写在前面，内层标记写在外面，中间用空格分隔。

当标记发生嵌套时，内层标记就成为外层标记的后代。

代码：

doctype>
html>
head>
meta charset="utf-8">
title>后代选择器title>
style type="text/css">
p strong{color:red;}
Strong{color:blue;}
style>
head>

body>
    p>段落文本strong>嵌套在段落中，使用strong标记定义的文本(红色)。strong>p>
    strong>嵌套之外由strong标记定义的文本(蓝色)。strong>
body>
html>

7、并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器(包括标记选择器、类选择器及id选择器等)，都可以作为并集选择器的一部分。

代码：

doctype>
html>
head>
meta charset="utf-8">
title>并集选择器title>
style type="text/css">
h2,h3,p{color:red; font-size:14px;}
h3,special,#one{text-decoration:underline;}
style>
head>

body>
    h2>二级标题文本。h2>
    h3>三级标题文本，加下划线。h3>
    p class="special">段落文本1,加下划线。p>
    p id="one">段落文本3:加下划线。p>
body>
html>

三、字体样式属性

1、font-size：字号大小

用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

CSS长度单位：
相对长度单位:
    em:    相对于当前对象内文本的字体尺寸
    px:    像素，最常用，推荐使用
绝对长度单位:
    im:    英寸
    cm:    厘米
    mm:    毫米
    pt:    点

2、font-family：字体

用于设置字体。

示例:

p{font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开：
body{font-family:"华文彩云","宋体","黑体";}

注:使用font-family设置字体时，需要注意以下几点。

  • 各种字体之间必须使用英文状态下的逗号隔开。
  • 中文字体需要加英文状态下的引号，当需要设置英文字体时，英文字体名必须位于中文字体名之前，例如：
body{font-family:Arial,"华文彩云","宋体","黑体";}    /*正确*/
body{font-family:"华文彩云","宋体","黑体",Arial;}    /*错误*/
  • 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号。

3、font-weight：字体粗细

用于定义字体的粗细。

font-weight可用属性值
    nomal:        默认值。定义标准的字符
    bold:        定义粗体字符
    bolder:        定义更粗的字符
    lighter:    定义更细的字符
    100~900(100的整数倍):
                定义由细到粗的字符。

注;常用的font-weight的属性值为normal和bold。

4、font-style：字体风格

用于定义字体风格，如设置斜体、倾斜或正常字体。其可用属性值为：

  • normal：默认值，浏览器会显示标准的字体样式。
  • italic：浏览器会显示斜体的字体样式。
  • oblique：浏览器会显示斜体的字体样式。

注：实际工作中一般用italic定义斜体。

5、font：综合设置字体样式

基本语法格式：

选择器{font:font-style font-weight font-size/line-height font-family;}

注：必须按上面语法格式中的顺序书写，各个属性以空格隔开。

p{
    font-family:Arial,"宋体";
    font-size:30px;
    font-style:italic;
    font-weight:bold;
    font-variant:small-caps;
    line-height:40px;
}

注：必须设置font-size和font-family属性，否则font属性将不起作用。

doctype>
html>
head>
meta charset="utf-8">
title>font属性title>
style type="text/css">
.one{ font:italic 18px/30px "隶书";}
.two{ font:italic 18px/30px;}
style>
head>

body>
    p class="one">段落1:使用font属性综合设置段落文本的字体风格、字号、行高和字体。p>
    p class="two">段落2:使用font属性综合设置段落文本的字体风格、字号和行高。由于省略了字体属性font-family,这时font属性不起作用。p>
body>
html>

6、word-wrap属性

用于实现长单词和URL地址自动换行。

基本语法格式：

选择器{word-wrap:属性值;}
word-wrap属性值：
    normal:        只在允许的断字点换行
    break-word:    在长单词或URL地址内部进行换行

示例：

doctype>
html>
head>
meta charset="utf-8">
title>word-wrap属性title>
style type="text/css">
    p{
        width:100px;
        height:100px;
        border:1px solid #000;
    }
    .break_word{word-wrap:break-word;}
style>
head>

body>
    span>word-wrap:normal;span>
    p>百度浏览器网址:http://baidu.comp>
    span>word-wrap:break-word;span>
    p class="break_word">百度浏览器网址:http://baidu.comp>
body>
html>

四、文本外观属性

1、color:文本颜色

用于定义文本的颜色，其取值方式有如下3种。

预定义的颜色值，如red,green,blue等。

十六进制，如#FF0000,#FF6600,#29D794等。

RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

2、letter-spacing：字间距

用于定义字间距。允许使用负值，默认为normal。

3、word-spacing：单词间距

用于定义单词之间的间距，对中文字符无效。允许使用负值，默认为normal。

示例：

doctype>
html>
head>
meta charset="utf-8">
title>word-spacing和letter-spacingtitle>
style type="text/css">
    .letter{ letter-spacing:20px; }
    .word{ word-spacing:20px; }
style>
head>

body>
    p class="letter">letter spacing(字母间距)p>
    p class="word">word spacing word spacing(单词间距)p>
body>
html>

4、line-height：行间距

用于设置行间距。

示例：

doctype>
html>
head>
meta charset="utf-8">
title>word-spacing和letter-spacingtitle>
style type="text/css">
    .one{
        font-size:16px;
        line-height:18px;
    }
    .two{
        font-size:12px;
        line-height:2em;
    }
    .three{
        font-size:12px;
        line-height:120%;
    }
style>
head>

body>
    p class="one">段落1:使用像素px设置line-height。该段落字体大小为16px,line-height属性值为18px。p>
    p class="two">段落2:使用相对值em设置line-height。该段落字体大小为12px。line-height属性值为2em。p>
    p class="three">段落3:使用百分比%设置line-height。该段落字体大小为14px。line-height属性值为150%。p>
body>
html>

5、text-transform：文本转换

用于控制英文字符的大小写。

  • name：不转换(默认值)
  • capitalize：首字母大写
  • uppercase：全部字符转换为大写
  • lowercase：全部字符转换为小写
  • 6、text-deciration：文本装饰

用于设置文本的下划线，上划线、删除线等装饰效果。

  • none：没有装饰(正常文本默认值)
  • underline：下划线
  • overline：上划线
  • line-through：删除线

注：text-transform后可以赋多个值，用于给文本添加多种显示效果。

示例：

doctype>
html>
head>
meta charset="utf-8">
title>文本装饰text-decorationtitle>
style type="text/css">
    .one{text-decoration:underline;}
    .two{text-decoration:overline;}
    .three{text-decoration:line-through;}
    .four{text-decoration:underline line-through;}
style>
head>

body>
    p class="one">设置下划线(underline)p>
    p class="two">设置上划线(overline)p>
    p class="three">设置删除线p>
    p class="four">同时设置下划线和删除线(underline line-through)p>
body>
html>

7、text-align：水平对齐方式

用于设置文本内容的水平对齐，相当于html中的align对齐属性，其可用属性值：

  • left：左对齐(默认值)
  • right：右对齐
  • center：居中对齐

注：

1.text-align属性仅适用于块级元素，对行内元素无效。

8、text-indent：首行缩进

用于设置首行文本的缩进。

doctype>
html>
head>
meta charset="utf-8">
title>首行缩进text-indenttitle>
style type="text/css">
    p{font-size:14px;}
    .one{text-indent:2em;}
    .two{text-indent:50px;}
style>
head>

body>
    p class="one">这是段落1中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落1使用text-indent:2em;。p>
    p class="two">这是段落2中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落2使用text-indent:50px;。p>
body>
html>

注：text-line属性仅适用于块级元素。对行内元素无效

HTML——CSS基础

标签：将不   normal   元素   ora   路径   状态   bre   优势   transform   

原文地址：https://www.cnblogs.com/dfif/p/12057931.html

上一篇：Node.js中的fs 模块

下一篇：利用css将英文转为大写或小写

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML——CSS基础
文章链接：http://soscw.com/index.php/essay/84022.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1