فصل سوم

CSS چیست؟

مانند HTML، CSS یک زبان برنامه نویسی نیست. این زبان نشانه گذاری نیز نیست. CSS یک زبان شیوه نامه است. CSS چیزی است که شما برای استایل کردن انتخابی عناصر HTML استفاده می کنید. به عنوان مثال، این CSS متن پاراگراف را انتخاب می کند و رنگ را قرمز می کند:

CSS مخفف Cascading Style Sheets است و زبانی است که برای طراحی سبک و چیدمان صفحات وب ایجاد شده با HTML استفاده می شود. در حالی که HTML ساختار یک وب سایت را تعریف می کند، CSS از استایل و طرح بندی مراقبت می کند – صفحه چگونه باید به نظر برسد. CSS به شما امکان می دهد رنگ ها، فونت ها، فاصله ها، اندازه ها و موارد دیگر را برای عناصر مختلف در یک صفحه وب تعریف کنید.

درک عمیق‌تر ساختار و اصطلاحات قواعد CSS:

بیایید کد CSS را برای متن پاراگراف قرمز تجزیه کنیم تا بفهمیم چگونه کار می کند؟

برای تسلط بر CSS و ساختار آن، بررسی دقیق اجزاء و اصطلاحات یک قاعده (به انگلیسی “ruleset”) ضروری است. هر قاعده از چند بخش کلیدی تشکیل شده است که با هم برای اعمال ‍سبک و قالب‌بندی به عناصر HTML همکاری می‌کنند.

اجزای یک قاعده:

1. انتخابگر / Selector:

• مشخص می‌کند که کدام عناصر HTML تحت تاثیر قاعده قرار می‌گیرند.

• در ابتدای قاعده قرار دارد و می‌تواند به انواع مختلفی از عناصر اشاره کند:
  • انتخابگر نوع / Type selector: مانند p برای پاراگراف‌ها <p>
  • انتخابگر کلاس / Class selector: مانند .نام‌کلاس که تمام عناصر با کلاس نام‌کلاس را انتخاب می‌کند
  • انتخابگر شناسه / ID selector: مانند #نام_شناسه که عنصری با شناسه نام_شناسه را انتخاب می‌کند
  • شبه‌کلاس‌ها و شبه‌عناصر / Pseudo-class selector: مانند :hover برای اثر هاور موس
  • Descendant Selector: عنصری را انتخاب می کند که از نسل دیگری است (به عنوان مثال، div p).
  • Child Selector: عناصر مستقیم فرزندان را انتخاب می کند (به عنوان مثال، ul > li).
  • Adjacent Sibling Selector: عنصری را انتخاب می کند که مستقیماً بعد از یک عنصر خاص دیگر قرار دارد (به عنوان مثال، h1 + p).
  • General Sibling Selector: عناصری را انتخاب می کند که خواهر و برادر یک عنصر مشخص شده باشند (به عنوان مثال، h1 ~ p).

2. شبه طبقات / Pseudo-Classes

شبه کلاس ها برای تعریف حالت خاصی از یک عنصر استفاده می شوند. در اینجا برخی از رایج ترین کلاس های شبه استفاده می شود:

• :hover: هنگامی که کاربر ماوس را روی یک عنصر با ماوس قرار می دهد، استایل ها را اعمال می کند.

• :focus: هنگامی که یک عنصر فوکوس داشته باشد، سبک‌ها را اعمال می‌کند (به عنوان مثال، فیلدهای ورودی هنگام کلیک کردن).

• :active: هنگامی که یک عنصر فعال می شود (به عنوان مثال، کلیک می شود) سبک ها را اعمال می کند.

• :first-child: اولین فرزند والدین خود را هدف قرار می دهد.

• :last-child: آخرین فرزند والدین خود را هدف قرار می دهد.

• :nth-child(n): نهمین فرزند والدین خود را هدف قرار می دهد.

3. شبه عناصر / Pseudo-Elements

عناصر شبه به شما این امکان را می دهند که به بخش های خاصی از یک عنصر استایل دهید. برخی از شبه عناصر رایج عبارتند از:

• ::before: محتوا را قبل از محتوای عنصر انتخاب شده درج می کند.

• ::after: محتوا را بعد از محتوای عنصر انتخاب شده درج می کند.

• ::first-line: خط اول متن یک عنصر را هدف قرار می دهد.

• ::first-letter: حرف اول متن را در یک عنصر هدف قرار می دهد.

4. ترکیب انتخابگرها / Combining Selectors

می توانید انتخابگرها را برای هدف قرار دادن عناصر به طور خاص تر ترکیب کنید، که این امکان را برای الگوهای یک ظاهر پیچیده بدون افزودن کلاس ها یا شناسه های اضافی به HTML فراهم می کند:

• ترکیب یک کلاس و کلاس شبه: .button:hover — هنگامی که ماوس را روی عناصر با کلاس “دکمه” قرار می دهید، سبک ها را اعمال می کند.

• ترکیب شناسه و شبه عنصر: #header::after — محتوا یا سبک‌هایی را بعد از محتوای عنصر با شناسه «هدر» اضافه می‌کند.

این مفاهیم CSS برای طراحی موثر وب یکپارچه هستند و به شما امکان می دهند ارائه صفحات وب را به صورت پویا و تعاملی دستکاری کنید و تجربه کاربری غنی تری را ارائه دهید. درک این انتخابگرها و شبه عناصر برای اعمال دقیق و کارآمد استایل ها ضروری است.

انتخابگرهای زیادی برای کشف وجود دارد. برای کسب اطلاعات بیشتر، راهنمای انتخابگرهای MDN را ببینید:

5. اعلامیه / Declaration:

• یک قانون سبک است که نحوه نمایش عناصر انتخاب‌شده را مشخص می‌کند.

• از دو بخش تشکیل شده است:
  • ویژگی / Property: مشخصه عنصر که ‍سبک‌بندی می‌شود (مانند رنگ، ‍فونت، چیدمان)
  • مقدار / Value: ‍ظاهر یا رفتار ‍ویژگی را تعیین می‌کند (مانند قرمز، 16px، flexbox)

• مثال: color: red; font-size: 16px;

6. ویژگی‌ها / Properties:

• مشخصه‌های قابل ‍سبک‌بندی یک عنصر را تعریف می‌کنند.

• CSS ‍ویژگی‌های متنوعی برای ‍تأثیرگذاری بر بخش‌های مختلف ‍یک عنصر ارائه می‌دهد:
  • تایپوگرافی: مانند font-family, font-size, text-align
  • رنگ: مانند color, background-color
  • چیدمان: مانند display, float, margin
  • موقعیت: مانند position, top, left
  • انیمیشن: مانند transition, animation

7. مقدار ‍ویژگی / Property value:

• ‍ظاهر یا رفتار ‍مشخص ‍ویژگی را تعیین می‌کند.

• انواع ‍مقادیر:
  • کلمات کلیدی: مانند bold, inherit
  • اعداد: مانند 16px, 100%
  • رنگ‌ها: مانند red, #00FF00
  • طول‌ها: مانند 1em, 20px
  • ‍مقادیر ‍پیچیده‌تر: مانند url(image.png), linear-gradient()

قواعد ‍مهم نگارشی / Syntax rules:

• پرانتز: قواعد ‍در ‍پرانتزهای مجعد ({}) قرار می‌گیرند.

• دو نقطه: ‍ویژگی و ‍مقدار را در ‍اعلامیه‌ها از هم جدا می‌کند (:).

• نقطه ویرگول: ‍هر ‍اعلامیه را ‍به ‍پایان می‌‍رساند (;).

• ترکیب: ‍امکان ‍استفاده از ‍چند ‍اعلامیه در ‍یک ‍قاعده ‍وجود دارد.

مثال ‍یک ‍قاعده ‍کامل:

‍جمع‌بندی:

• قواعد ‍CSS ‍امکان ‍سبک‌بندی ‍عناصر ‍HTML را ‍فراهم ‍می‌کنند.

• ‍انتخابگرها ‍عناصر ‍را ‍انتخاب ‍و ‍اعلامیه‌ها ‍سبک ‍آنها ‍را ‍مشخص ‍می‌کنند.

• ‍ویژگی‌ها و ‍مقادیر ‍جزئیات ‍‍سبک‌

CSS یک زبان قدرتمند است که برای استایل دادن به اسناد HTML استفاده می شود. دستورات آن، که معمولاً به عنوان خصوصیات شناخته می شوند، می توانند به طور کلی به چندین گروه مفید طبقه بندی شوند. در اینجا برخی از متداول‌ترین ویژگی‌های CSS که بر اساس عملکرد آنها گروه‌بندی شده‌اند، آورده شده است:

1. ویژگی های طرح بندی / Layout Properties

این ویژگی ها به تعریف طرح بندی صفحات وب کمک می کنند.

نمایش (display): رفتار نمایشگر را مشخص می کند (به عنوان مثال، بلوک، درون خطی، انعطاف پذیر، شبکه).

موقعیت (position): نوع روش موقعیت یابی مورد استفاده را مشخص می کند (به عنوان مثال، مطلق، نسبی، ثابت، چسبنده).

Float (float): یک عنصر را در سمت چپ یا راست ظرف آن قرار می دهد و به متن و عناصر درون خطی اجازه می دهد تا دور آن بپیچند.

Clear (clear): مشخص می کند که عناصر شناور در کدام طرف یک عنصر مجاز به شناور نیستند.

2. Flexbox و Grid

برای ساختارهای چیدمان پیشرفته، به ویژه در طراحی های واکنش گرا استفاده می شود.

ویژگی‌های انعطاف‌پذیری / Flex Properties: شامل جهت انعطاف‌پذیری، انعطاف‌پذیری، توجیه محتوا، تراز کردن آیتم‌ها، تراز کردن محتوا، رشد انعطاف‌پذیر، منقبض شدن انعطاف‌پذیر و پایه انعطاف‌پذیری است.

ویژگی های گرید: شامل گرید-الگو-ستون ها، گرید-الگو-ردیف ها، گرید-ستون، گرید-ردیف، ناحیه-شبکه، شبکه-شکاف.

3. ویژگی های مدل جعبه / Box Model Properties

اندازه و فاصله عناصر را کنترل کنید.

Width and Height (width, height): عرض و ارتفاع عناصر را مشخص کنید.

Padding (padding): فضایی را در اطراف محتوای یک عنصر، در داخل هر مرز تعریف شده ایجاد می کند.

حاشیه (حاشیه): فضای اطراف عناصر را کنترل می کند.

Border (border): حاشیه اطراف عناصر را تنظیم می کند.

4. خواص تایپوگرافی / Typography Properties

این ویژگی ها سبک و طرح متن و فونت ها را مشخص می کنند.

ویژگی های فونت: شامل اندازه فونت، خانواده فونت، وزن فونت، سبک فونت.

ویژگی های متن: شامل تراز کردن متن، تزئین متن، تبدیل متن، ارتفاع خط، فاصله حروف، سایه متن.

5. ویژگی های جلوه های بصری / Visual Effects Properties

علاقه بصری و نشانه‌ها را به طرح‌بندی‌ها اضافه کنید.

Color (color): رنگ متن را مشخص می کند.

پس‌زمینه (پس‌زمینه، رنگ پس‌زمینه، تصویر پس‌زمینه، موقعیت پس‌زمینه، پس‌زمینه تکرار، اندازه پس‌زمینه): پس‌زمینه عناصر را تعریف می‌کند.

Box Shadow (box-shadow): افکت های سایه را در اطراف کادر یک عنصر اضافه می کند.

Opacity (opacity): سطح کدورت یک عنصر را تنظیم می کند.

فیلتر (فیلتر): جلوه های گرافیکی مانند تاری یا تغییر رنگ را روی یک عنصر اعمال می کند.

6. انیمیشن و انتقال / Animation and Transitions

برای افزودن افکت های تعاملی و پویا.

Transition (transition): راهی برای کنترل سرعت انیمیشن در هنگام تغییر ویژگی های CSS ارائه می دهد.

انیمیشن (@keyframes، انیمیشن-نام، انیمیشن-مدت، انیمیشن-زمان-عملکرد، انیمیشن-تاخیر، انیمیشن-تکرار-تعداد، انیمیشن-جهت): امکان کنترل بیشتر روی انیمیشن های CSS را فراهم می کند.

7. خواص متفرقه / Miscellaneous Properties

سایر خواص مهم که اغلب برای اهداف خاص استفاده می شوند.

مکان نما (cursor): نوع نشانگر ماوس را مشخص می کند.

Z-index (z-index): ترتیب پشته عناصر همپوشانی را کنترل می کند.

Visibility (Visibility): مشخص می کند که آیا یک عنصر قابل مشاهده است یا خیر.

این دسته‌بندی‌ها ضروری‌ترین جنبه‌های CSS را پوشش می‌دهند که برای ساخت و استایل تقریباً تمام رابط‌های وب استفاده می‌شوند. هر دسته به بخش خاصی از فرآیند استایل و چیدمان می پردازد و به توسعه دهندگان این امکان را می دهد که هم طراحی های وب جذاب و هم کاربردی ایجاد کنند.

برخی از مفاهیم اساسی CSS که فراتر از ویژگی ها هستند:

 بیایید این مفاهیم را که شامل انتخابگرها، شبه کلاس‌ها و شبه عناصر و غیره هستند، بررسی کنیم. اینها برای هدف قرار دادن عناصر HTML برای اعمال موثر سبک ها بسیار مهم هستند.

بیایید امتحان کنیم! 

من از این ویرایشگر HTML/CSS برای این پروژه استفاده می کنم:

ما روی فایل index.html که در بالا به عنوان مثال ساخته ایم کار می کنیم.

 با استفاده از یک ویرایشگر متن، سه خط CSS (بالا) را در یک فایل جدید قرار دهید. فایل را به عنوان style.css در فهرستی با نام styles ذخیره کنید.

اکنون ما سه فایل برای این پروژه داریم: index.html: این همان چیزی است که در فصل 2 HTML ساختیم. (اگر پروژه ما را دنبال نکرده اید، در اینجا مکث کنید تا فصل ۲: Hyper Text Markup Language را بخوانید.)

iman.png: عکسی است که در مثال خود استفاده می کنیم.

style.css: ما فقط این را برای استایل های Css خود ایجاد کردیم.

برای اینکه کد کار کند، همچنان باید این CSS (بالا) را در سند HTML شما اعمال کنیم. در غیر این صورت، استایل ظاهر HTML را تغییر نخواهد داد.

     فایل index.html خود را باز کنید. خط زیر را در سر (بین تگ‌های <head> و </head>) قرار دهید:

href=”در اینجا مسیر فایل style.css می آید” را تغییر دهید!

نتیجه باید اینگونه باشد:

index.html را ذخیره کرده و در مرورگر خود بارگذاری کنید. شما باید چیزی شبیه به این را ببینید:

اگر متن پاراگراف شما قرمز است، تبریک می‌گوییم! CSS شما کار می کند. اگر نه، لطفا مسیر style.css بالا را بررسی کنید.

فونت و متن / Fonts and text

اکنون که برخی از اصول CSS را بررسی کردیم، بیایید ظاهر مثال را با افزودن قوانین و اطلاعات بیشتر به فایل style.css بهبود دهیم.

     ابتدا خروجی فونت های گوگل را که قبلاً ذخیره کرده اید از وب سایت شما چگونه خواهد بود پیدا کنید. عنصر <link> را در جایی داخل سر index.html خود اضافه کنید (هر جایی بین تگ‌های <head> و </head>). چیزی شبیه این به نظر می رسد:

این کد صفحه شما را به یک شیوه نامه پیوند می دهد که خانواده فونت Open Sans را با صفحه وب شما بارگیری می کند.

در مرحله بعد، قانون موجود در فایل style.css خود را حذف کنید. تست خوبی بود، اما اجازه دهید با متن قرمز زیاد ادامه ندهیم.

خطوط زیر را اضافه کنید (در زیر نشان داده شده است)، و به جای انتساب خانواده فونت با انتخاب خانواده فونت خود از وب سایت شما چه خواهد شد؟ ویژگی font-family به فونت(هایی) که می خواهید برای متن استفاده کنید اشاره دارد. این قانون یک فونت پایه جهانی و اندازه فونت را برای کل صفحه تعریف می کند. از آنجایی که <html> عنصر والد کل صفحه است، همه عناصر داخل آن اندازه فونت و خانواده فونت یکسانی را به ارث می برند.

توجه: هر چیزی در CSS بین /* و */ یک نظر CSS است. مرورگر هنگام ارائه کد، نظرات را نادیده می گیرد. نظرات CSS راهی برای نوشتن یادداشت های مفید در مورد کد یا منطق خود است.

حالا بیایید اندازه فونت را برای عناصری که متنی در بدنه HTML دارند (<h1>، <li> و <p>) تنظیم کنیم. ما همچنین عنوان را در مرکز قرار می دهیم. در نهایت، اجازه دهید مجموعه قوانین دوم (در زیر) را با تنظیمات ارتفاع خط و فاصله حروف گسترش دهیم تا محتوای بدنه را خوانا تر کنیم.

مقادیر px را همانطور که دوست دارید تنظیم کنید. کار در حال انجام شما باید شبیه به این باشد:

CSS: همه چیز درباره جعبه ها Boxes

چیزی که در مورد نوشتن CSS متوجه خواهید شد: بسیاری از آن در مورد جعبه ها هستند. این شامل تنظیم اندازه، رنگ و موقعیت است. بیشتر عناصر HTML در صفحه شما را می توان به عنوان جعبه هایی در نظر گرفت که در بالای کادرهای دیگر قرار دارند.

چیدمان CSS بیشتر بر اساس مدل جعبه است. هر کادری که فضای صفحه شما را اشغال می کند دارای ویژگی هایی مانند:

•      padding، فضای اطراف محتوا. در مثال زیر، فضای اطراف متن پاراگراف است.

•      border، خط ثابتی که درست خارج از بالشتک قرار دارد.

•      margin، فضای اطراف بیرون مرز.

در این بخش نیز از:

•      width : عرض (یک عنصر).

•     background color پس‌زمینه رنگ، رنگ پشت محتوای یک عنصر و بالشتک.

•    color  رنگ، رنگ محتوای یک عنصر (معمولاً متن).

•      text-shadow بر روی متن داخل یک عنصر سایه می گذارد.

•      display حالت نمایش یک عنصر را تنظیم می کند. (برای یادگیری بیشتر خواندن را ادامه دهید)

برای ادامه، بیایید CSS بیشتری اضافه کنیم. به افزودن این قوانین جدید در پایین style.css ادامه دهید. با تغییر مقادیر آزمایش کنید تا ببینید چه اتفاقی می افتد.

تغییر رنگ صفحه

این قانون یک رنگ پس زمینه برای کل صفحه تعیین می کند. کد رنگ را به رنگی که انتخاب میکنید تغییر دهید:

حالت دادن به بدن / Styling the body

این کد را به فایل style.css اضافه کنید:

توضیحات برای عنصر <body>

برخی از اعلان‌هایی که معمولاً برای عنصر <body> استفاده می‌شوند به شرح زیر هستند. اجازه بدید آن‌ها را خط به خط بررسی کنیم:

width: 600px 

• این کد عرض عنصر <body> را همیشه 600 پیکسل ثابت نگه می‌دارد.

margin: 0 auto

• زمانی که برای ویژگی‌ای مانند margin یا padding دو مقدار اختصاص می‌دهید، مقدار اول بر بالا و پایین عنصر تأثیر می‌گذارد (که در این مورد مقدار آن صفر در نظر گرفته شده است). مقدار دوم بر چپ و راست عنصر اثر می‌گذارد. auto در اینجا یک مقدار ویژه است که فضای افقی باقی‌مانده را به‌طور مساوی بین چپ و راست تقسیم می‌کند. به یاد داشته باشید که می‌توانید از یک، دو، سه یا چهار مقدار با توجه به مستندات “Margin Syntax” استفاده کنید.

background-color: #FFFFFF

• رنگ پس‌زمینه عنصر را تنظیم می‌کند. در اینجا یک رنگ نارنجی مایل به قرمز برای پس‌زمینه <body> در نظر گرفته شده است. این در تقابل با رنگ آبی تیره استفاده‌شده برای پس‌زمینه عنصر <html> است. (می‌توانید با رنگ‌ها به دلخواه خودتان آزمایش کنید.)

padding: 0 20px 20px 20px

• چهار مقدار برای حاشیه‌گذاری داخلی تعیین می‌کند. هدف از این کد افزودن فاصله در اطراف محتوایِ درون عنصر است. در این مثال، در بالای <body> حاشیه‌ای وجود ندارد و 20 پیکسل فاصله در سمت راست، پایین و چپ آن در نظر گرفته شده است. مقادیر به‌ترتیب “بالا، راست، پایین و چپ” لحاظ می‌شوند. همانند margin ، می‌توانید از یک، دو، سه یا چهار مقدار طبق آنچه در “Padding Syntax” توضیح داده شده است استفاده کنید.

border: 5px solid black

• مقادیر عرض، سبک و رنگ حاشیه خارجی عنصر را مشخص می‌کند. در اینجا نوع حاشیه solid و به‌رنگ مشکی و با عرض 5 پیکسل در نظر گرفته شده است که در تمام اضلاع <body> لحاظ می‌شود.

اگر همه چیز را به درستی انجام داده اید، اکنون وب سایت باید به این شکل باشد:

تعیین موقعیت و استایل کردن عنوان صفحه اصلی

ممکن است متوجه شده باشید که شکاف وحشتناکی در بالای بدن وجود دارد. این اتفاق می افتد زیرا مرورگرها یک ظاهر طراحی پیش فرض را برای عنصر h1 (در میان سایر موارد) اعمال می کنند. ممکن است ایده بدی به نظر برسد، اما هدف این است که خوانایی اولیه برای صفحات بدون استایل ارائه شود. برای از بین بردن شکاف، استایل پیش فرض مرورگر را با حاشیه تنظیم بازنویسی می کنیم:

 ;margin: 0

در مرحله بعد، قسمت بالا و پایین عنوان را روی 20 پیکسل قرار می دهیم.

به دنبال آن، متن عنوان را همرنگ رنگ پس‌زمینه HTML قرار می‌دهیم.

در نهایت، text-shadow یک سایه به محتوای متن عنصر اعمال می کند. چهار مقدار آن عبارتند از:

•      اولین مقدار پیکسل، افست افقی سایه را از متن تعیین می کند: تا چه اندازه حرکت کند.

•      دومین مقدار پیکسل، افست عمودی سایه را از متن تعیین می کند: چقدر به سمت پایین حرکت کند.

•      سومین مقدار پیکسل شعاع تاری سایه را تعیین می کند. یک مقدار بزرگتر باعث ایجاد سایه مبهم تری می شود.

•      مقدار چهارم رنگ پایه سایه را تعیین می کند.

سعی کنید با مقادیر مختلف آزمایش کنید تا ببینید چگونه ظاهر را تغییر می دهد.

مکان تصویر را تغییر دهید / Change the image position

در مرحله بعد، تصویر را در مرکز قرار می دهیم تا بهتر به نظر برسد. می‌توانیم از حاشیه استفاده کنیم: 0 ترفند خودکار دوباره همانطور که برای بدنه انجام دادیم. اما تفاوت هایی وجود دارد که برای کارکرد CSS نیاز به تنظیمات اضافی دارد.

<body> یک عنصر بلوک است، به این معنی که فضای صفحه را اشغال می کند. حاشیه اعمال شده بر روی یک عنصر بلوک توسط سایر عناصر موجود در صفحه رعایت می شود. در مقابل، تصاویر عناصر درون خطی هستند، برای اینکه ترفند حاشیه خودکار روی این تصویر کار کند، باید با استفاده از ;display: block رفتاری در سطح بلوک به آن بدهیم.

توجه: دستورالعمل‌های بالا فرض می‌کنند که از تصویری کوچک‌تر از عرض تنظیم‌شده روی بدنه استفاده می‌کنید. (600 پیکسل) اگر تصویر شما بزرگتر باشد، از بدنه سرریز می شود و به بقیه صفحه می ریزد. برای رفع این مشکل، می توانید: 1) عرض تصویر را با استفاده از ویرایشگر گرافیکی کاهش دهید، یا 2) از CSS برای اندازه گیری تصویر با تنظیم ویژگی width در عنصر <img> با مقدار کوچکتر استفاده کنید.

توجه: اگر کاملاً متوجه نشدید، زیاد نگران نباشید: block; یا تفاوت بین یک عنصر بلوکی و یک عنصر درون خطی. با ادامه مطالعه CSS، منطقی تر خواهد بود. می توانید اطلاعات بیشتری در مورد مقادیر مختلف نمایش در صفحه مرجع نمایشگر MDN بیابید.

اگر تمام دستورالعمل‌های ما را دنبال کردید، باید صفحه‌ای مشابه این صفحه داشته باشید:

index.html

style.css

Frontend

من از منابع مختلف و هوش مصنوعی برای کتاب استفاده کردم (, Mozilla Official, Google, Open AI):