第四周 CSS初学

html>
<html>
<head lang="en">
    <meta charset="UTF-8">


    <style type="text/css">
        #price1 {
            color: red;
            font-size: 40px;
        }
    style>
    <link rel="stylesheet" href="../../css/first.css"/>
    
    <title>css入门title>
head>
<body>


<P>
    电脑 <span style="color: red;font-size: 40px">1span>元起
P>

<p>
    电脑 <span id="price1">1span>元起
p>

<p>
    电脑 <span id="price2">1span>元起
p>
body>

html>

html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <style type="text/css">
        /* ID选择器 */
        #price1{
            color: yellow;
            font-size: 20px;
            text-decoration: underline;
        }
    style>
    <link rel="stylesheet" href="../../css/first.css"/>
    <title>CSS样式优先级title>
head>
<body>



<p>
    电脑 <span id="price1">1span>元起
p>
body>
html>




html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        /* 标签选择器:作用于当前页面所有匹配标签 */
        li  { color: yellow}
        /* 类选择器 :作用于class值为red的标签*/
        .red{
    color: red}
    style>

    <title>标签选择器title>
head>
<body>
<ul>
    <li>家用电器li>
    <li class="red">各类书籍li>
    <li>手机数码li>
    <li class="red">日用百货li>
ul>
body>
html>



html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        p {
            /*前面是字体族名称 最后一个是类族名称
            浏览器显示字体时,依次判断是否支持当前字体直到最后的字体系列
            如果支持宋体就不往后找了*/
            font-family: "宋体","微软雅黑", sans-serif;
            /*bold为加粗,bolder为更粗,但是受有些字体影响不能二次加粗
            lighter为细体 100-900*/
            font-weight: bold;
            /*字体大小  取值1、具体的px 2.百分比
            (字体默认大小为16px*/
            font-size: 30px;
            /*字体样式,italic为斜体*/
            font-style: italic;
            /*font(缩写形式) 严格按照font-weight font-sizefont-family
             font-style*/
            /*color*/
            color:black;
            /*字体透明度opacity
            0是全透明,1是正常*/
            opacity:0.5 ;
        }
    style>
    <title>title>
head>
<body>

<p>
    星巴克(Starbucks)是美国一家连锁咖啡公司的名称,1
p>
body>
html>

你可能感兴趣的:(第四周 CSS初学)